![regularjs](http://regularjs.github.io/image/regular-icon-100.png)

Regularjs

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

✨中文指南
✨中文API

Features

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.

Quick Start

Example 1: define a simple Note Component

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.

Example 2: define a List Component

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

Example 3: combine Note with NoteList

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

Resources

Official Site
Reference

Browser Compatibility

IE7+ and other modern browsers.

Installation

bower

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 (browserify or other based on commonjs)

$ npm install regularjs

use

var Regular = require('regularjs');

component

$ component install regularjs/regular

use

var Regular = require('regularjs/regular');

Direct download

Who are using?

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

Community

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: @拴萝卜的棍子

Contributing

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)

LICENSE

MIT.

krossell/regular