Miss any of our Open RFC calls?Watch the recordings here! »

ko-component-router

5.0.1 • Public • Published

ko-component-router

NPM Version WTFPL Travis Coverage Status Dependency Status Peer Dependency Status NPM Downloads Gitter

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

Install

npm i ko-component-router

DownloadsWeekly Downloads

109

Version

5.0.1

License

WTFPL

Last publish

Collaborators

  • avatar
  • avatar