After version 0.3.0: regularjs change the default TAG from `{{}}` to the more clean`{}`, please use `Regular.config({BEGIN:'{{', END: '}}'})` if you need the old syntax`

Regularjs

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

Features

• 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

Quirk 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

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.

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 by statement list.

Example2 on codepen.io

Example 3: combine Note with NoteList

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}> <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, 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

Resources

• Offcial Site
• Reference

Browser Compatibility

IE7+ and other modern browser.

installation

###bower

bower install regularjs

dist/regular.js have been packaged as a standard UMD, you can use it in AMD、commonjs and 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');

Directly download

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

Who are using ?

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

Community

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

Contribute

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)

LICENSE

MIT.