TODO List Sample

Simply to create a TODOlist sample

Sample Show
Loading...
Step1. Create HTML template(todo.html)
<!--[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>
Step2. Create a style file(main.scss)
.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;
            }
        }
    }
}
Step3. Create Javascript file(test.js)
/*!
 * @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"
                });
            }
        }
    }
});
Step4. Create index file(index.html)
<!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>
Step5. Run the program.

The file to any web server deployment and access index.html. Local direct open is not running.

DownLoad todolist demo Source