a concise, flexible framework for creating data-driven component
you will enjoy it just like you enjoy angularjs :)
live templating is string-based, take more control on templating logic.
data-binding, directive, filter, event and animation... all of them is supported out of box with concise API
compeletely self-contained, easily integrated and well encapsulation. make it be friendly with large-project
<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>
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')