teng2015 / ko-component-router

:station: Component based router for developing wicked awesome apps with Knockout

ko-component-router

Super-duper flexible component based router for developing wicked awesome single page apps with KnockoutJS

YOU ARE ON THE next BRANCH

oh hai, a blog post on changes in ko-component-router@next, fancy that.

Installation

$ yarn add ko-component-router@next

...or...

$ npm install -S ko-component-router@next

Usage

app.js

import $ from 'jquery'
import ko from 'knockout'
import Router from 'ko-component-router'

const loading = ko.observable(true)

Router.use(loadingMiddleware)

Router.useRoutes({
  '/': 'home',
  '/users': {
    '/': [loadUsers, 'users'],
    '/:id': [loadUser, 'user']
  }
})

ko.component.register('home', {
  template: `<a data-bind="path: '/users'">Show users</a>`
})

ko.components.register('users', {
  viewModel: class UsersViewModel {
    constructor(ctx) {
      this.users = ctx.users
    }

    navigateToUser(user) {
      Router.update('/users/' + user.id, { with: { user } })
    }
  },
  template: `
    <ul data-bind="foreach: users">
      <span data-bind="text: name, click: navigateToUser"></span>
    </ul>
  `
})

ko.components.register('user', {
  viewModel: class UserViewModel {
    constructor(ctx) {
      this.user = ctx.user
    }
  },
  template: `...`
})

function loadingMiddleware(ctx) {
  return {
    beforeRender() {
      loading(true)
    },
    afterRender() {
      loading(false)
    }
  }
}

// generators are also supported if you're a pioneer of sorts
// function * loadingMiddleware(ctx) {
//   loading(true)
//   yield
//   loading(false)
// }

function loadUsers(ctx) {
  // return promise for async middleware
  return $.get('/api/users/').then((us) => ctx.users = us)
}

function loadUser(ctx) {
  // if not passed in via `with` from Users.navigateToUser
  if (!ctx.user) {
    return $.get('/api/users/' + ctx.params.id).then((u) => ctx.user = u)
  }
}

ko.applyBindings({ loading })

index.html

<ko-component-router data-bind="css: { opacity: loading() ? .5 : 1 }"></ko-component-router>

More