学步园

模仿这里的网站，用我的框架实现一遍

Todos

Mark all as complete

Clear completed

回车添加新的工作清单

双击工作清单可编辑它

Created by

司徒正美.

Rewritten by: TodoMVC.

       $.require("ready,attr,event,fx,more/ejs",function(){

                $("body").on("keyup","#new-todo", function(e){
                    if( (e.which == 108 || e.which === 13) && this.value){
                        var view =  $.ejs("#item-tmpl",{
                            done: false,
                            title: this.value
                        });
                        this.value = "";
                        $.log( $("#todo-list").length)
                        $("#todo-list").prepend(view);
                        $("body").fire("show")
                    }
                }).on("click","#toggle-all",function(){//全选
                    var check = this.checked;
                    $("#todo-list .toggle").prop("checked", check);
                    $("#todo-list li")[ check ? "removeClass" : "addClass"]("completed")
                    $("body").fire("show")
                }).on("click", "#todo-list .toggle", function(){//切换自身
                    $("body").fire("show")
                }).on("dblclick","#todo-list li", function(){//变成可编辑状态
                    $(".editing").removeClass("editing");//每次只编辑一个
                    $(this).addClass("editing").find(".edit").focus();
                }).on("keyup","#todo-list li", function(e){//回车
                    if( (e.which == 108 || e.which === 13)){
                        var v = $(this).find(".edit").val();
                        var view =  $.ejs("#item-tmpl",{
                            done: false,
                            title: v
                        });
                        $(this).replace(view);
                    }
                }).on("click", "#todo-list .destroy", function(e){
                    $(this).parents("li").remove();
                    $("body").fire("toggle")
                }).on("click","#clear-completed",function(){
                    $("#todo-list input:checked").parents("li").remove();
                    $("body").fire("toggle")
                }).on("show",function(){
                    $("#todo-main").show();
                    var input = $("#todo-list .toggle")
                    done = input.filter(":checked").length
                    var view = $.ejs("#stats-tmpl",{
                        remaining: input.length - done,
                        done: done
                    });
                    $("#todo-footer").text(view).show()
                }).on("toggle", function(){
                    if( $("#todo-list li").length ){
                        $("body").fire("show")
                    }else{
                        $("#todo-main,#todo-footer").hide();
                        $("#toggle-all").prop("checked",false)

                    }
                })
            })