Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tangbc/sugar
A lightweight and powerful JavaScript MVVM library. Used for production or learning how to make a full MVVM.
https://github.com/tangbc/sugar
framework front-end javascript javascript-mvvm-library mvvm
Last synced: 20 days ago
JSON representation
A lightweight and powerful JavaScript MVVM library. Used for production or learning how to make a full MVVM.
- Host: GitHub
- URL: https://github.com/tangbc/sugar
- Owner: tangbc
- License: mit
- Created: 2015-09-27T14:43:58.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2023-10-31T06:58:02.000Z (about 1 year ago)
- Last Synced: 2024-11-11T09:44:16.543Z (about 1 month ago)
- Topics: framework, front-end, javascript, javascript-mvvm-library, mvvm
- Language: JavaScript
- Homepage: https://github.com/tangbc/sugar/wiki
- Size: 3.36 MB
- Stars: 354
- Watchers: 31
- Forks: 60
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-github-star - sugar
README
## sugar
> A lightweight and powerful JavaScript MVVM library for building easy web UI.
Simple api and without any dependence. Consists of two independent libraries:
* **`mvvm.js`** *A simple ViewModel library* , ***it can be used independently***.
* **`sugar.js`** *Component system + mvvm.js , for building flexible web components*.
## Diagram
## HelloWorld
### mvvm.js
```html
{{ title }}
var vm = new MVVM({
view: document.getElementById('app'),
model: {
title: 'Hello world!'
}
})
// Model drive View:
vm.$data.title = 'Change title!';
```
More MVVM directives are supported, see all at [documentation](https://github.com/tangbc/sugar/wiki/MVVM).
### sugar.js
```html
{{ title }}
// define HelloWorld component:
var HelloWorld = Sugar.Component.extend({
init: function (config) {
this.Super('init', config, {
target: '#app',
model: {
title: 'Hello world!'
}
});
},
// Hook of after view was rendered.
afterRender: function () {
// Model drive View:
this.vm.$data.title = 'Change title!';
}
});
// create component instance:
var app = Sugar.core.create('hello-world', HelloWord);
```
SubComponent, component nesting and message system see [documentaion](https://github.com/tangbc/sugar/wiki).
## Demos
There are several complete and amusing demos in **`demos/`** folder make you know more about `sugar.js`, check it out and preview them in the following links:
* [StarRating](https://tangbc.github.io/sugar/demos/starRating)
* [DatePicker](https://tangbc.github.io/sugar/demos/datePicker)
* [TodoMVC](https://tangbc.github.io/sugar/demos/todoMVC)
* [Snake eat apple game](https://tangbc.github.io/snake-eat-bugs/)
> *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](https://jsfiddle.net/tangbc/may7jzb4/9/).
## Usage
* Both support [`UMD`](https://github.com/umdjs/umd) (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.](https://github.com/tangbc/sugar/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](https://github.com/tangbc/sugar/wiki/API)
* **`src/mvvm/`**80% A powerful and easy-using MVVM library. [API & Doc](https://github.com/tangbc/sugar/wiki/MVVM)
* **`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`**.
## ChangeLogs
[Check details from releases](https://github.com/tangbc/sugar/releases)
## License
[MIT License](https://github.com/tangbc/sugar/blob/master/LICENSE)