sugar-js
v1.4.0
A lightweight and powerful JavaScript MVVM library for building web UI component.
104/weekUpdated 3 years agoMIT
Published by TANG
npm install sugar-js
sugar
> A lightweight and powerful JavaScript MVVM library for building web UI component.
Simple api and without any dependence.
Consists of two independent libraries:
sugar.js Component system + MVVM , for building flexible web component*.
mvvm.js Achived above MVVM , it doesn't rely on sugar, it can be used independently*.
Diagram
HelloWorld
``
html
{{ title }}
`
javascript
// 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/parsed to be:
html
Hello world!
`
Data reactive (Model Drive View):
javascript
app.vm.$data.title = 'Change the title!'; // Change the title!
`
More MVVM directives are supported, see all at documentation.Demos
There are several complete and amusing demos in
folder make you know more about sugar.js, check it out and preview them in the following links:* StarRating
* DatePicker
* TodoMVC
* Snake eat apple game
> i. Sometimes Github-page link disconnected by
Enforce HTTPS, please use https protocol instead.> ii. Some demos need httpSever (Ajax), so run script
npm run server to preview them if in your local.You can also experience
sugar.js online with a RadioComponent at jsfiddle.
Usage
* Get by NodeJS package:
npm install sugar-js --save (Universal Module Definition)
* mvvm.js (just 28 kb) https://tangbc.github.io/sugar/dist/mvvm.min.js
* sugar.js (just 35 kb) https://tangbc.github.io/sugar/dist/sugar.min.js* Browsers: Not support IE8 and below. Besides, support most modern desktop and mobile browsers.
Documentation
Get start and check documentation on Wiki.
Directories
*
build/ Development, production and test configurations.*
demos/ Several complete examples/demos developed by sugar.js.*
dist/ Product files of sugar.js and mvvm.js, and their compressed.*
src/ Source code module files: *
src/main/20% A simple component system. API & Doc *
src/mvvm/80% A powerful and easy-using MVVM library. API & Doc*
test/ Unit test specs writing by karma + jasmine.
Contribution
Welcome any pull request of fixbug or improvement, even only supplement some unit test specs.
1. Fork and clone repository to your local.
2. Install NodeJS package devtools:
npm install.3. Develop and debug:
npm run dev (generate sourcemap files in bundle/).4. Add and write test spec, (in
test/units/specs/) then run uint test：npm run test.5. Generate the test coverage report and jshint checking up:
npm run build`.