模仿这里的网站,用我的框架实现一遍
Todos
回车添加新的工作清单
双击工作清单可编辑它
$.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) } }) })