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: 8 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 (over 8 years ago)
• Default Branch: master
• Last Pushed: 2023-10-31T06:58:02.000Z (8 months ago)
• Last Synced: 2024-06-05T18:58:19.149Z (22 days ago)
• Topics: framework, front-end, javascript, javascript-mvvm-library, mvvm
• Language: JavaScript
• Homepage: https://github.com/tangbc/sugar/wiki
• Size: 3.36 MB
• Stars: 351
• Watchers: 31
• Forks: 60
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-github-star - sugar
• awesome-stars - tangbc/sugar - A lightweight and powerful JavaScript MVVM library. Used for production or learning how to make a full MVVM. (JavaScript)

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)