Creating Component with MVVM Pattern

you will enjoy it just like you enjoy angularjs :)

Powerful

live templating is string-based, take more control on templating logic.

Concise

data-binding, directive, filter, event and animation... all of them is supported out of box with concise API

Flexible

compeletely self-contained, easily integrated and well encapsulation. make it be friendly with large-project

Getting Start with Regularjs's Guide

OR CHECK THE DEMO

 
<div class="m-todo">
{#if !username}
  Friend, please <a href='#' on-click={this.login()}>Login</a>
{#else}
  Welcome, {username} <a href='javascript:;' on-click={username = ''}>Logout</a>
  <input on-enter={this.add(draft)} r-model={draft}/>
  <ul class='list'>
    <h3>you have {todos.length} todos </h3>
    {#list todos as todo}
      <li class={todo.compeleted? 'compeleted': ''}>
        {todo.content} <a href='#' on-click={this.remove(todo_index)}>X</a> 
      </li>
    {/list}
  </ul>
{/if}
</div>
x
 
var App = Regular.extend({
  template:'#example', 
 
login: function(){
 this.data.username = prompt('input username', '')
 return false
},
add: function(draft){
 var data = this.data;
 data.todos.push({content: draft});
 data.draft = '';
},
remove: function(index){
 var data = this.data;
  data.todos.splice(index, 1);
 return false;
}
 
})
app = new App({data: {todos: []}}).inject('#demo-view')
RUN
Friend, please Login