regularjs is a live template engine helping us to create interactive component.

features

1. data-binding based on dirty-check
2. string-based template
3. independent lifecycle —— can be integrated with whatever framework you already used.
4. nested component
5. class-based component. just like angular-classy do for angular
6. powerfull animation supported (blog)
7. directive, filter, event is supported, and extend easily.

with the code that less than 20 line , a simple noteapp is done. check the result on jsfiddle

template

{{#list notes as c}}
  <p>{{c.content}}<a href='#' on-click={{this.remove(c)}}>remove</a></p>
{{/list}}
<textarea r-model={{draftComment}}></textarea>
<button on-click={{this.add()}}>new Note</button>

javascript

var NoteApp = Regular.extend({
  template: "#todos",
  remove: function(index){
    this.data.notes.splice(index,1);
  },
  add: function(){
    var data = this.data;
    data.notes.push({ content: data.draftComment})
    data.draftComment = "";
  }
});

new NoteApp({ data: {notes:[] }}).inject(document.body);

regularjs can be installed via component and bower . you can also directly download the latest package

then you can find regular.js and regular.min.js in dist folder;

or....

<script src="https://rawgit.com/regularjs/regular/master/dist/regular.min.js"></script>

• regular's Offcial Guide(use gitbook)
• Offcial Site

• 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. weibo: chinese friends can also follow author's weibo@拴萝卜的棍子
  3. gitter: talk on

regularjs is still in heavily development, helping us with pull request and 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)

##Gulp Task

###1. gulp test the test command contains casper, mocha, karma. and output the coverage information

###2. gulp dev watch and build the source code

###3. other... see the gulpfile.js

MIT.

IE7+ and other modern browser. In fact, most of our products need to support IE6, so ie6 is still under testing currently

• 0.2.4: suport computed property see more on regularjs.guide

• 0.2.3: pure declarative animation r-animated is supported

• 0.2.2: you can use delegate-[event] to delegate the event from element to containerElement.

• 0.2.1: now pass Non-Expression to on-* attribute will proxy the event to specified event.

• 0.2.0:

  1. @(Expression) to create binding-once Expression
  2. lightweight animation support
  3. svg support
  4. {{#if }} can be used in tag. like <div {{#if !user }} on-click = {{this.login()}}{{/if}}></div>

1. example gallery progressing
2. interactive tutorial
3. blog