Regularjs is a living template engine that helping us to create data-driven component.

• String-based template make it flexible to build your component.
• data-binding is based on dirty-check, angular experience also make sense to regularjs
• self-contained and well encapsulation, make it be easily integrated with other framework
• composite component , using component as 'custom element'.
• directive, filter, event and animation... all you need is provided out of box with concise API

var Note = 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'.
var note = new Note().$inject("#app"); 

Example1 on codepen.io

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

var NoteList = Regular.extend({
template: 
  "<ul>{{#list notes as nt}}" +
    "<li class={{nt.done? 'done': ''}} on-click={{nt.done= !nt.done}}>{{nt.content}}</li>" + 
  "{{/list}}</ul>"
});

var list = new NoteList({
  data: {notes: [{content: 'playgame'}, {content: 'homework'}]}
}).$inject("#app");

In this Example, we create a ListView by statement list.

Example2 on codepen.io

we need refactor Note to make it composable.

var Note = Regular.extend({
  name: 'note',  // register component during the definition of Component
  template: 
   "<input r-model={{draft}} on-enter={{this.post()}}>", 
  post: function(){
    var data = this.data;
    this.$emit('post', data.draft);
    data.draft = ""; //clear the draft
  }

});

Regular.component('list', NoteList);  // manual register a component

when 'Enter' is pressed, we emit a 'post' event with the draft as the $event object.

the this in template is pointing to the component self.

then, define Core Component: NoteApp.

var NoteApp = Regular.extend({
  template: 
    "<note on-post={{notes.push({ content: $event} )}}/>"+ 
    "<list notes = {{notes}}></list>"
})

var noteapp = new NoteApp({
    data: {notes:[] }
});

noteapp.$inject('#app');

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

Example3 on codepen.io

See more on Guide: Quirk Start

• regular's Offcial Guide(use gitbook)
• Offcial Site
• demo on codepen.io

IE7+ and other modern browser.

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

• Ask any questions on Stack Overflow with tag regularjs.

• Social

  1. twitter: follow the @regularjs.
  2. gitter: talk on
  3. weibo: @拴萝卜的棍子

regularjs is still in heavily development, helping us with feedback. there is some recommend to contributor.

• Please open issue before sending pull request,
• if needed, add your testcase at test/specs folder. always make sure the gulp test is passed, and the test/runner/index.html is passed in every target browser (if you doesn't have some browser installed that list in gulpfile's karmaConfig)

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

MIT.