50行代码仿backbone_todos
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>模仿TODOS，写了一个todos</title>
<script src="../3.20/jquery.js"></script>
<script src="../3.20/underscore-1.1.6.js"></script>
<script src="../3.20/backbone.js"></script>
</head>
<body>
<div id="app">
<ul id="contain">
</ul>
<a href="###" class="delAll">dsdfelAll</a>
<a href="###" class="addDefault">addDefault</a>
</div>
<script type="text/template" id="personTpl">
<li>
<span><%=name%></span>
<b><%=age%></b>
<button>del</button>
<a>add</a>
</li>
</script>
</body>
<script>
var M = Backbone.Model.extend({
defaults : {
name : "qihao",
age : 27
}
});
var C = Backbone.Collection.extend({
model : M
});
var c = new C;
var V1 = Backbone.View.extend({
tagName : "li",
initialize : function(){
},
events : {
"click button" : "destory",
"click a" : "addOne"
},
tpl : _.template( $("#personTpl").html() ),
render : function(){
$(this.el).html( this.tpl( this.model.toJSON() ) )
return this;
},
destory : function(){
c.remove(this.model)
},
addOne : function(){
var name = prompt("name");
var age = prompt("age");
c.add(new M({name : name ,age : age}));
}
});
var V2 = Backbone.View.extend({
el : $("#app"),
events : {
"click .delAll" : "delAll",
"click .addDefault" : "addDefault"
},
initialize : function(){
this.c = c;
//数据模型的绑定this，要这样用才行;
c.bind("all",this.renderAll,this)
},
renderAll : function(){
this.el.find("#contain").html(" ");
var _this = this;
this.c.each(function(m){
_this.renderSingal(m)
});
},
renderSingal : function(m){
this.el.find("#contain").append( (new V1({model : m})).render().el )
},
delAll : function(){
this.el.find("#contain").html(" ");
},
addDefault : function(){
this.renderSingal( new M )
}
});
c.add( new M({name : "a", age : 2}) );
c.add( new M());
var v2 = new V2()
v2.renderAll()
</script>
</html>
天道酬勤
