Merge pull request #5 from caseyWebb/route-binding

ko.bindingHandlers.route

README.md

@@ -124,6 +124,15 @@ function hideLoader(ctx, next) {
 }
 ```
 
+## Route Binding
+Working with base paths can be tricky, to aid in this, the router exposes a simple
+binding so you can pass only the relevant part of the route, regardless of the
+current base path.
+
+```html
+<a data-bind="route: '/user/1234'">John Doe</a>
+```
+
 ## Parameters / Route Matching, State, Middleware, 404 behavior
 Consult [page.js' documentation](https://github.com/visionmedia/page.js), it probably
 has your answer. If not, feel free to email me at [notcaseywebb@gmail.com](mailto:notcaseywebb@gmail.com).

src/lib/binding.js

@@ -0,0 +1,17 @@
+'use strict'
+
+var ko = require('knockout')
+
+var router = require('./router')
+
+ko.bindingHandlers.route = {
+  init: function(el, valueAccessor) {
+    ko.applyBindingsToNode(el, {
+      attr: {
+        href: ko.pureComputed(function() {
+          return router._basePath + ko.unwrap(valueAccessor())
+        })
+      }
+    })
+  }
+}

src/lib/component.js

@@ -5,8 +5,8 @@ var ko = require('knockout')
 var router = require('./router')
 
 function ViewModel() {
-  this.component = router.component
-  this.ctx = router.ctx
+  this.component = router._component
+  this.ctx = router._ctx
 }
 
 ko.components.register('ko-component-router', {

src/lib/router.js

@@ -4,16 +4,20 @@ var ko = require('knockout')
 var page = require('page')
 
 function Router() {
-  this.component = ko.observable()
-  this.ctx = ko.observable()
+  this._component = ko.observable()
+  this._ctx = ko.observable()
 }
 
 Router.prototype.start = function(config) {
-  if (config && config.basePath)
-    page.base(config.basePath)
+  if (typeof config === 'undefined')
+    config = {}
 
+  this._basePath = config.basePath || ''
+
+  page.base(this._basePath)
   page.start(config)
 
+  require('./binding')
   require('./component')
 }
 
@@ -55,8 +59,8 @@ Router.prototype.route = function(route) {
 
   function getComponentSetter(component) {
     return function(ctx, next) {
-      self.component(component)
-      self.ctx(ctx)
+      self._component(component)
+      self._ctx(ctx)
       ctx.handled = true
       next()
     }

test/binding.spec.js

@@ -0,0 +1,25 @@
+'use strict'
+
+var expect = require('chai').expect
+var ko = require('knockout')
+var $ = require('jquery')
+
+var router = require('../src/lib/router')
+
+require('../src/lib/binding')
+
+describe('binding', function() {
+
+  it('should set the correct href with no base path', function() {
+    var el = $('<a></a>').get(0)
+    ko.bindingHandlers.route.init(el, ko.observable('/binding'))
+    expect($(el).attr('href')).to.equal(router._basePath + '/binding')
+  })
+
+  it('should set the correct href with a base path', function() {
+    var el = $('<a></a>').get(0)
+    router._basePath = '/base'
+    ko.bindingHandlers.route.init(el, ko.observable('/binding'))
+    expect($(el).attr('href')).to.equal(router._basePath + '/binding')
+  })
+})

test/component.spec.js

@@ -11,6 +11,7 @@ var ComponentViewModel = require('../src/lib/component')
 describe('component', function() {
 
   before(function() {
+    debugger
     history.pushState({}, null, '/component')
     router.route('/component', 'component')
     router.start()
@@ -19,7 +20,7 @@ describe('component', function() {
   it('should get the component and context from the router', function() {
     var vm = new ComponentViewModel()
 
-    expect(vm.component()).to.equal(router.component())
-    expect(vm.ctx()).to.deep.equal(router.ctx())
+    expect(vm.component()).to.equal(router._component())
+    expect(vm.ctx()).to.deep.equal(router._ctx())
   })
 })

test/router.spec.js

@@ -34,17 +34,18 @@ function runTests(config) {
       page.start.restore()
     })
 
-    it('should set the base path if applicable', function() {
-      if (config.basePath)
-        expect(pageBaseSpy.calledWith(config.basePath)).to.be.true
-      else if (!config.basePath)
-        expect(pageBaseSpy.called).to.be.false
+    it('should call page.base', function() {
+      expect(pageBaseSpy.calledWith(config.basePath)).to.be.true
     })
 
     it('should pass the options to page', function() {
       expect(pageStartSpy.calledWith(config)).to.be.true
     })
 
+    it('should load the binding', function() {
+      expect(ko.bindingHandlers.route).to.exist
+    })
+
     it('should load the component', function() {
       expect(ko.components.isRegistered('ko-component-router')).to.be.true
     })
@@ -94,8 +95,8 @@ function runTests(config) {
 
       function getAssert(cb) {
         return function (ctx, next) {
-          expect(router.component()).to.equal('component')
-          expect(router.ctx()).to.exist
+          expect(router._component()).to.equal('component')
+          expect(router._ctx()).to.exist
           cb()
           next()
         }