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