Regularjs is a living template engine that helps us to create data-driven components.

• ✨中文指南
• ✨中文API

• String-based template makes it flexible to write your component;
• data-binding based on dirty-check: experience from AngularJS-like frameworks also makes sense to regularjs;
• self-contained and well-defined encapsulation makes it more easily integrated with other frameworks;
• composite components: components can be used as "custom elements";
• directive, filter, event and animation... all you need is provided out of the box with concise API.

varNote=Regular.extend({template: "<input{#if !disabled} r-model='hello'{#else} disabled{/if} >{hello} \ <button on-click={disabled = !disabled}>{disabled? 'active': 'disable'} it</button>"});// inject component into #app , you can also inject at 'before' , 'after', 'top'.varnote=newNote().$inject("#app");

Example1 on codepen.io

This example is dead simple, but you can find the directive and attribute is easily switched by statement 'if', which is difficult with other mvvm frameworks.

varNoteList=Regular.extend({template: "<ul>{#list notes as nt}"+"<li class={nt.done? 'done': ''} on-click={nt.done= !nt.done}>{{nt.content}}</li>"+"{/list}</ul>"});varlist=newNoteList({data: {notes: [{content: 'playgame'},{content: 'homework'}]}}).$inject("#app");

In this Example, we create a ListView with the statement list.

Example2 on codepen.io

We need to refactor Note to make it composable.

varNote=Regular.extend({name: 'note',// register component during the definition of Componenttemplate: "<input r-model={draft}> <button on-click={this.post()}> post</button>",post: function(){vardata=this.data;this.$emit('post',data.draft);data.draft="";//clear the draft}});Regular.component('list',NoteList);// manual register a component

When 'Enter' is pressed, Note will emit a 'post' event with draft as the $event object.

The keyword this in the template refers to the component itself.

Then, let's define the core component: NoteApp.

varNoteApp=Regular.extend({template: "<note on-post={notes.push({content: $event} )}/>"+"<list notes ={notes}></list>"});varnoteapp=newNoteApp({data: {notes:[]}});noteapp.$inject('#app');

you can register a component (via attribute name or method Component.component) to make it composable in other components.

Example3 on codepen.io

See more on Guide: Quick Start

• Official Site
• Reference

IE7+ and other modern browsers.

bowerinstallregularjs

dist/regular.js has been packaged as a standard UMD, and therefore you can use it in AMD, commonjs or global.

$ npm install regularjs

use

varRegular=require('regularjs');

$ component install regularjs/regular

use

varRegular=require('regularjs/regular');

1. regular.js
2. regular.min.js

1. NetEase: the operator of the famous website www.163.com.

• If you find any bug or have any suggestion, please feel free to open an issue

• Ask any question on Stack Overflow with tag regularjs.

• Social

  1. twitter: follow the @regularjs
  2. gitter: join chat at
  3. weibo: @拴萝卜的棍子

regularjs is still under heavy development, and please help us with feedback. Contributing to this project is also welcome.

• Please open an issue before sending pull request
• if needed, add your testcase in test/specs folder. Always make sure the gulp test is passed, and the test/runner/index.html is passed in every target browser (if a certain browser is not installed, list that in gulpfile's karmaConfig)

MIT.