A lightweight and powerful MVVM library for building web UI component.
Simple api and without any dependence. Consists of two independent libraries:
sugar.jsComponent system + MVVM , for building flexible web component.mvvm.jsAchived above MVVM , it doesn't rely on sugar, it can be used independently.
...
<body>
<div id="app">
<h1>{{ title }}</h1>
</div>
</body>
...// define HelloWorld component:
var HelloWorld = sugar.Component.extend({
init: function (config) {
this.Super('init', config, {
target: '#app',
model: {
title: 'Hello world!'
}
});
}
});
// create component instance:
var app = sugar.core.create('hello-world', HelloWord);And then the HTML structure was rendered to be:
...
<body>
<div class="app">
<h1>Hello world!</h1>
</div>
</body>
...Data reactive (Model Drive View):
app.vm.$data.title = 'Change the title!'; // <h1>Change the title!</h1>There are several complete demos in demos/, check it out and preview them in the following links:
(Some demos depend httpSever, so run script npm run server to get these demos if in your local.)
You can also preview sugar.js with the RadioComponent at jsfiddle.
-
Get by nodejs package:
npm install sugar-js -
Both support
UMD(Universal Module Definition)mvvm.js (about 28 kb)https://tangbc.github.io/sugar/dist/mvvm.min.jssugar.js (about 34 kb)https://tangbc.github.io/sugar/dist/sugar.min.js
-
Browsers: Not support IE8 and below. Besides, support most modern desktop and mobile browsers.
Get start and check documentation on Wiki.
-
build/Development, production and test configurations. -
demos/Several complete examples/demos developed bysugar.js. -
dist/Product files ofsugar.jsandmvvm.js, and their compressed. -
src/Source code module files: -
test/Unit test specs writing by karma + jasmine.
-
Fork and clone repository to your local
-
Install nodejs package devtools:
npm install -
Develop and debug:
npm run dev(generate sourcemap files inbundle/) -
Add and write test spec, (in
test/units/specs/) then run uint test：npm run test -
Generate the test coverage report and jshint checking up:
npm run build