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.

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

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.

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 with the statement list.

Example2 on codepen.io

We need to refactor Note to make it composable.

var Note = Regular.extend({
  name: 'note',  // register component during the definition of Component
  template:
   "<input r-model={draft}> <button on-click={this.post()}> post</button>",
  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, 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.

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 it composable in other components.

Example3 on codepen.io

See more on Guide: Quick Start

• Official Site
• Reference

IE7+ and other modern browsers.

bower install regularjs

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

var Regular = require('regularjs');

$ component install regularjs/regular

use

var Regular = 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.