<!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>

　　

50行代码仿backbone_todos的更多相关文章

  1. python爬虫实战：利用scrapy，短短50行代码下载整站短视频

    近日,有朋友向我求助一件小事儿,他在一个短视频app上看到一个好玩儿的段子,想下载下来,可死活找不到下载的方法.这忙我得帮,少不得就抓包分析了一下这个app,找到了视频的下载链接,帮他解决了这个小问题 ...

  2. 50行代码实现python计算器主要功能

    实现功能:计算带有括号和四则运算的式子   3*( 4+ 50 )-(( 100 + 40 )*5/2- 3*2* 2/4+9)*((( 3 + 4)-4)-4) 基本思路:使用正则表达式提取出每一层 ...

  3. 50行代码实现缓存，JAVA内存模型原理

    遇见这样的高人怎么办??下面是一个简单缓存的实现,相当牛叉!自己看吧,只有50行代码. 摘自:http://www.oschina.net/code/snippet_55577_3887 import ...

  4. HTML5游戏实战(1)：50行代码实现正面跑酷游戏

    前段时间看到一个"熊来了"的HTML5跑酷游戏,它是一个典型的正面2D跑酷游戏,这里借用它来介绍一下用Gamebuilder+CanTK开发正面跑酷游戏的基本方法. CanTK(C ...

  5. 50行代码实现GAN | 干货演练

    2014年,Ian Goodfellow和他的同事发表了一篇论文,向世界介绍了生成对抗网络(GAN).通过对计算图和博弈论的创新性组合,他们表明如果有足够的建模能力,两个相互对抗的模型可以通过普通的反 ...

  6. 基于requirejs+bluebird，50行代码实现轻巧实用的前端CMD加载器

    首先是github地址,可以用git克隆命令也可以直接在git页面下载 https://github.com/kazetotori/js-requireAsync 下载下来后目录结构是这样的 -pac ...

  7. [Lua]50行代码的解释器，用来演示lambda calculus

    嗯,来写写经过: 在知乎上看见用Belleve牛用javascript写了一个精简的lisp解释器 => 我也想写一个,用lua写,能多简单呢? => 写了一个阉割的scheme解释器,包 ...

  8. OpenCV图像识别初探-50行代码教机器玩2D游戏【华为云技术分享】

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/devcloud/article/detai ...

  9. 50行代码实现的高性能动画定时器 raf-interval

    写在前面 raf-interval 是基于 window.requestAnimationFrame() 封装的定时器. Github: https://github.com/dntzhang/raf ...

随机推荐

  1. 【MVC 4】6.SportsSore：导航

     作者:[美]Adam Freeman      来源:<精通ASP.NET MVC 4> 前面的文章[MVC 4]5.SportsSore —— 一个真实的应用程序 建立了 Sports ...

  2. 我的opencv之旅：ios人脸识别

    学习opencv有一年多了,这本来是我的毕业设计的一部分,但是因为不能突出专业重点,所以换了个课题. opencv在vc.android.ios下都能用,其中vc和android下的教程和主题贴最多, ...

  3. POJ 2001 Shortest Prefix

    字典树基本题. 代码: #include <iostream> #include <cstdio> #include <cstring> #include < ...

  4. PPP（点对点协议（Point to Point Protocol）

    1.简介PPP(点到点协议)是为在同等单元之间传输数据包这样的简单链路设计的链路层协议.这种链路提供全双工操作,并按照顺序传递数据包.设计目的主要是用来通过拨号或专线方式建立点对点连接发送数据,使其成 ...

  5. 浅析C#深拷贝与浅拷贝（转）

    1.深拷贝与浅拷贝   拷贝即是通常所说的复制(Copy)或克隆(Clone),对象的拷贝也就是从现有对象复制一个“一模一样”的新对象出来.虽然都是复制对象,但是不同的 复制方法,复制出来的新对象却并 ...

  6. 加密算法使用（四）：AES的使用

    AES是一种对称加密方式,比DES更为安全,用一个秘钥加密数据之后,可以用同一个秘钥对加密后的数据解密还原,以下是一套以字符串为例子的使用全过程演示, 用到了 commons-codec.jar pa ...

  7. 将请求挂载至WEB页面

    有两种方式 1.使用标准的方式,在某个菜单下面直接加入标准功能  提交请求(FEM_FWK_SUBMIT_REQ),然后即可在页面上提交请求. 2.将指定请求定义成功能,在WEB页面使用功能直接提交指 ...

  8. 一个按钮，如果5分钟内点击再次点击给予提示操作频繁，在JS里可以这样写

    很简单. 但是,如果你要离开这个页面再进来, 就没办法限制了. 除非用cookie 储存状态 给个示例 var isLock = flase; //定义全局变量 按钮点击事件: if(isLock){ ...

  9. [iOS翻译]《iOS 7 Programming Cookbook》：iOS文件与文件夹管理（下）

    三. 创建文件夹 问题: 你想创建文件夹到磁盘,存储一些文件到里面 解决方案: 使NSFileManager类的实例方法createDirectoryAtPath:withIntermediateDi ...

  10. python数字图像处理（14）：高级滤波

    本文提供更多更强大的滤波方法,这些方法放在filters.rank子模块内. 这些方法需要用户自己设定滤波器的形状和大小,因此需要导入morphology模块来设定. 1.autolevel 这个词在 ...