Nautilus: Pelagic Mollusc

    ko-component-router
    TypeScript icon, indicating that this package has built-in type declarations

    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

    2

    Version

    5.0.1

    License

    WTFPL

    Last publish

    Collaborators

    • barsh
    • caseywebb