https://github.com/rla/kontainer

ViewModel lifecycle manager KnockoutJS applications
https://github.com/rla/kontainer

frontend knockoutjs

Last synced: over 1 year ago
JSON representation

ViewModel lifecycle manager KnockoutJS applications

• Host: GitHub
• URL: https://github.com/rla/kontainer
• Owner: rla
• License: mit
• Created: 2015-04-04T18:38:09.000Z (about 11 years ago)
• Default Branch: master
• Last Pushed: 2015-04-14T23:22:52.000Z (about 11 years ago)
• Last Synced: 2025-02-17T02:47:53.337Z (over 1 year ago)
• Topics: frontend, knockoutjs
• Language: JavaScript
• Size: 141 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# kontainer

ViewModel lifecycle manager for (parts of) KnockoutJS applications. Offers more flexibility

than built-in KO components and prevents unnecessary reflows.

## API

    var show = kontainer.create(Element|String target)

Returns function to replace the contents of the given target element.

The target element can be given as a DOM element or a selector expression.

    show(DOM|String template, Object viewModel)

Binds and renders the template to the previously set target. Template

can be either a DOM element/document fragment or a string. Unbinds

previously set viewModel.

### Lifecycle callbacks

The viewModel can have the following methods defined:

 * `inserted(DOM target)` - called when the template is inserted into the DOM tree.

 * `bound(DOM target)` - called when the viewModel is bound to the DOM tree.

 * `dispose(DOM target)` - called when the template and the viewModel are replaced.

The `inserted` callback is called before `bound` as the template is

inserted into the DOM tree before the bindings are applied.

## Example

```javascript

var show = kontainer.create('#content');

document.getElementById('link-page-1').addEventListener('click', function() {

    show('',

        { message: ko.observable('Hello World!') });

}, false);

```

Creates target on element with id `content` and sets up a link handler to replace its

contents with the given template and view model.

## AMD/CommonJS

The source `kontainer.js` uses CommonJS module format. `dist/kontainer-standalone.js`

contains minified build in UMD format that supports both AMD and CommonJS environments and also

sets global `kontainer`.

If installed through NPM then the module can be directly used in browserify by simply require()'ing

it:

    var kontainer = require('kontainer');

## Building/testing

Install build dependencies:

    npm install

Run static server:

    make serve-test

Run tests:

    make test

## License

The MIT License.