zoukankan      html  css  js  c++  java
  • 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>
    

      

  • 相关阅读:
    Codeforces Round #592 (Div. 2)C. The Football Season(暴力,循环节)
    Educational Codeforces Round 72 (Rated for Div. 2)D. Coloring Edges(想法)
    扩展KMP
    poj 1699 Best Sequence(dfs)
    KMP(思路分析)
    poj 1950 Dessert(dfs)
    poj 3278 Catch That Cow(BFS)
    素数环(回溯)
    sort与qsort
    poj 1952 buy low buy lower(DP)
  • 原文地址:https://www.cnblogs.com/diligenceday/p/3620769.html
Copyright © 2011-2022 走看看