Simply to create a TODOlist sample
<!--[todolist]-->
<div class="todolisthead">
<div class="todolisthead-input"><input type="text" data-find="input"/></div>
<div class="todolisthead-btn" data-find="btn"><i class="fa fa-check"></i></div>
</div>
<div class="todolist-body" data-find="body">
<@include data="{{data.list}}" template="{{data.template}}"/>
</div>
<!--[todolistlist]-->
<div class="todolistlist-con">
<%for(var i in data){%>
<div class="todolist-con-item" data-group="item" @cache(data[i])>
<div class="todolist-con-item-desc" data-groupi="name"><%=data[i].name;%></div>
<div class="todolist-con-item-btn" data-groupi="btn"><i class="fa fa-cross"></i></div>
</div>
<%}%>
</div>
.todolist{
.todolisthead{
line-height:45px;
display:-webkit-flex;
background:#D7D7D7;
.todolisthead-input{
line-height:45px;
-webkit-flex:1;
input{
width:100%;
line-height:35px;
border:0;
padding:0 0 0 5px;
-webkit-box-sizing: border-box;
}
}
.todolisthead-btn{
width:45px;
text-align: center;
}
}
.todolist-body{
.todolist-con-item{
line-height:45px;
display:-webkit-flex;
border-bottom:1px solid #D7D7D7;
.todolist-con-item-desc{
line-height:45px;
-webkit-flex:1;
}
.todolist-con-item-btn{
width:45px;
text-align: center;
}
}
}
}
/*!
* @packet test;
* @css test.style.main;
* @template test.todolist;
*/
Module({
name:"todolist",
extend:"view",
className:"todolist",
template:module.getTemplate("@todolist","todolist"),
init:function(){
this.data={
template:module.getTemplate("@todolist","todolistlist"),
list:[]
};
//Observe this.data
this.observe("data",this.data);
//Render template
this.render(this.data);
},
/*Template contains the data-find='btn'tag in the template when the callback, and the incoming DOM*/
find_btn:function(dom){
var ths=this;
dom.click(function(){
var val=ths.finders("input").val();
if(val!==""){
ths.data.list.push({
name:val
});
}
});
},
/*Template contains the data-group='item'tag in the template when the callback, and the incoming DOM*/
group_item:function(dom,group){
group.get("btn").click(function(){
$(this).group().cache().remove();
});
},
/*When listening to the data this.data in the list attribute to add data operation callback*/
"data_list_add":function(e){
//Render the newly added data into the DOM
$.template(this.data.template).renderAppendTo(this.finders("body"),[e.value]);
//Re associate data with DOM
this.delegate();
},
/*When listening to the data list in the this.data attribute data is deleted when the callback*/
"data_list_remove":function(e){
//Removes the specified data from the DOM in the DOM
this.groups().eq(e.value[0].getIndex()).remove();
this.delegate();
}
});
Option({
name: "root",
option: {
override: {
/*When root is initialized, the callback is completed.*/
onendinit: function () {
//add todolist module to the root module
this.addChild({
type: "@.todolist"
});
}
}
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="bright.js" type="text/javascript"></script>
<script>
$.App({
basePath:"packet2/",
debug:true
}).boot("test.root");
</script>
</head>
<body>
</body>
</html>
The file to any web server deployment and access index.html. Local direct open is not running.