@profiscience/knockout-contrib-router
[![Version][npm-version-shield]][npm] [![Dependency Status][david-dm-shield]][david-dm] [![Peer Dependency Status][david-dm-peer-shield]][david-dm-peer] [![Dev Dependency Status][david-dm-dev-shield]][david-dm-dev] [![Downloads][npm-stats-shield]][npm-sta
Last updated 2 months ago by caseywebb .
WTFPL · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @profiscience/knockout-contrib-router 
SYNC missed versions from official npm registry.

@profiscience/knockout-contrib-router

Version Dependency Status Peer Dependency Status Dev Dependency Status Downloads Gitter

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

Installation

$ npm install @profiscience/knockout-contrib-router

...or...

$ yarn add @profiscience/knockout-contrib-router

Usage

app.js

import * as $ from 'jquery'
import * as ko from 'knockout'
import { Route, Router } from '@profiscience/knockout-contrib'

const loading = ko.observable(true)

Router.use(loadingMiddleware)

Router.useRoutes([
  new Route('/', 'home'),
  new Route('/users', [
    new Route('/', [loadUsers, 'users']),
    new Route('/:id', [loadUser, 'user'])
  ])
])
/**
 * Optionally use object-shorthand
 *  Router.useRoutes({
 *    '/': 'home',
 *    '/users': {
 *      '/': [loadUsers, 'users'],
 *      '/:id': [loadUser, 'user']
 *    }
 *  })
 */

ko.components.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: $parent.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)
// }

// TypeScript? Good for you! Just add ~water~ these lines
// declare module '@profiscience/knockout-contrib-router' {
//   interface IContext {
//     user?: MyUserTypeDef
//     users?: MyUserTypeDef[]
//   }
// }

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

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

More

Current Tags

  • 2.0.7                                ...           latest (2 months ago)
  • 2.0.0-alpha.54341a5d                                ...           next (a year ago)
  • 2.0.0-rc.14                                ...           rc (8 months ago)

47 Versions

  • 2.0.7                                ...           2 months ago
  • 2.0.6                                ...           4 months ago
  • 2.0.5                                ...           5 months ago
  • 2.0.4                                ...           6 months ago
  • 2.0.3                                ...           6 months ago
  • 2.0.2                                ...           7 months ago
  • 2.0.1                                ...           8 months ago
  • 2.0.0                                ...           8 months ago
  • 2.0.0-rc.14                                ...           8 months ago
  • 2.0.0-rc.13                                ...           8 months ago
  • 2.0.0-rc.12                                ...           9 months ago
  • 2.0.0-rc.11                                ...           a year ago
  • 2.0.0-rc.10                                ...           a year ago
  • 2.0.0-rc.9                                ...           a year ago
  • 2.0.0-rc.8                                ...           a year ago
  • 2.0.0-rc.7                                ...           a year ago
  • 2.0.0-rc.6                                ...           a year ago
  • 2.0.0-rc.5                                ...           a year ago
  • 2.0.0-rc.4                                ...           a year ago
  • 2.0.0-rc.3                                ...           a year ago
  • 2.0.0-alpha.54341a5d                                ...           a year ago
  • 2.0.0-rc.2                                ...           a year ago
  • 2.0.0-next.1                                ...           a year ago
  • 2.0.0-next.0                                ...           a year ago
  • 2.0.0-rc.1                                ...           a year ago
  • 2.0.0-rc.0                                ...           a year ago
  • 1.3.0                                ...           a year ago
  • 2.0.0-8                                ...           a year ago
  • 2.0.0-7                                ...           a year ago
  • 2.0.0-6                                ...           2 years ago
  • 2.0.0-5                                ...           2 years ago
  • 2.0.0-4                                ...           2 years ago
  • 2.0.0-3                                ...           2 years ago
  • 2.0.0-2                                ...           2 years ago
  • 2.0.0-1                                ...           2 years ago
  • 2.0.0-0                                ...           2 years ago
  • 1.2.0                                ...           2 years ago
  • 1.1.0                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
  • 1.0.0-alpha.7                                ...           2 years ago
  • 1.0.0-alpha.6                                ...           2 years ago
  • 1.0.0-alpha.4                                ...           2 years ago
  • 1.0.0-alpha.3                                ...           2 years ago
  • 1.0.0-alpha.2                                ...           2 years ago
  • 1.0.0-alpha.1                                ...           2 years ago
  • 1.0.0-alpha.0                                ...           2 years ago
  • 1.0.0-0                                ...           2 years ago
Maintainers (2)
Downloads
Today 0
This Week 1
This Month 2
Last Day 1
Last Week 1
Last Month 50
Dependencies (2)
Dev Dependencies (10)

Copyright 2014 - 2016 © taobao.org |