Seed.js

Modern, lightweight JavaScript MVVM

[ WARNING pre-alpha status - tests not complete! ]

Features

<10kb gzipped, no dependency.
DOM based templates with two-way data binding.
Precise and efficient DOM manipulation with granularity down to a TextNode.
POJSO (Plain Old JavaScript Objects) Models that can be shared across ViewModels with arbitrary levels of nesting.
Auto dependency extraction for computed properties.
Auto event delegation on repeated items.
Flexible API that allows easy encapsulation of components.
Supports partials, transitions and nested ViewModels.
Plays well with module systems. Primarily Component based, but can also be used with Browserify, as a CommonJS/AMD module or as a standalone library.

Browser Support

Most Webkit/Blink-based browsers
Firefox 4+
IE9+ (IE9 needs classList polyfill)

Installation

Component

$ component install yyx990803/seed

Browserify

$ npm install seed-mvvm

Bower

$ bower install seed

Module Loaders, e.g. RequireJS, SeaJS

Built versions in /dist or installed via Bower can be used directly as a CommonJS or AMD module.

Standalone

Simply include a built version in /dist or installed via Bower with a script tag. seed will be registered as a global variable. You can also use it directly over Browserify CDN at http://wzrd.in/standalone/seed-mvvm

Development

Make sure you have grunt-cli installed globally. Then clone the repo and install dependencies:

$ npm install

To watch and auto-build dev version during development:

$ grunt watch

To test:

$ grunt test

To build:

$ grunt

Quickstart

HTML

<div id="demo" sd-on="click:changeText">
    <p sd-text="hello"></p>
</div>

JavaScript

new Seed({
    el: '#demo',
    scope: {
        hello: 'Hello World!',
        changeText: function () {
            this.hello = 'Hello Seed!'
        }
    }
})

Documentation

Coming soon...

License

MIT

README.md 2.2 KB Riwayat Mentahan