https://github.com/crissdev/knockout-state-renderer

A Knockout based rendering layer for the abstract-state-router
https://github.com/crissdev/knockout-state-renderer

Last synced: about 2 months ago
JSON representation

A Knockout based rendering layer for the abstract-state-router

• Host: GitHub
• URL: https://github.com/crissdev/knockout-state-renderer
• Owner: crissdev
• License: mit
• Created: 2015-07-13T19:41:05.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2015-10-24T21:22:31.000Z (about 9 years ago)
• Last Synced: 2024-10-28T03:35:42.414Z (2 months ago)
• Language: JavaScript
• Size: 168 KB
• Stars: 4
• Watchers: 5
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# knockout-state-renderer

[![npm version](https://badge.fury.io/js/knockout-state-renderer.svg)](http://badge.fury.io/js/knockout-state-renderer)

Use [Knockout](http://github.com/knockout/knockout/) with [abstract-state-router](https://github.com/TehShrike/abstract-state-router)!

## Examples 

- **Hackers News** http://crissdev.github.io/hn-ko-asr/

## Usage

```js

var StateRouter = require('abstract-state-router')

var knockoutRenderer = require('knockout-state-renderer')

var domready = require('domready')

var stateRouter = StateRouter(knockoutRenderer(/* options */), 'body')

// add whatever states to the state router

domready(function() {

    stateRouter.evaluateCurrentRoute('login')

})

```

See [state-router-example](https://github.com/crissdev/state-router-example/tree/gh-pages/implementations/knockout) for an implementation using

this renderer.

## API

The renderer implementation accepts some options to control data binding inside the templates.

#### dataItemAlias

An alias used when the binding context is created, accessible inside the templates. The default value 

is `$page`.

#### childElementSelector

The CSS selector used to find the element where the child state should be rendered. The default value

is `ui-view`.