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>
50行代码仿backbone_todos的更多相关文章
- python爬虫实战:利用scrapy,短短50行代码下载整站短视频
近日,有朋友向我求助一件小事儿,他在一个短视频app上看到一个好玩儿的段子,想下载下来,可死活找不到下载的方法.这忙我得帮,少不得就抓包分析了一下这个app,找到了视频的下载链接,帮他解决了这个小问题 ...
- 50行代码实现python计算器主要功能
实现功能:计算带有括号和四则运算的式子 3*( 4+ 50 )-(( 100 + 40 )*5/2- 3*2* 2/4+9)*((( 3 + 4)-4)-4) 基本思路:使用正则表达式提取出每一层 ...
- 50行代码实现缓存,JAVA内存模型原理
遇见这样的高人怎么办??下面是一个简单缓存的实现,相当牛叉!自己看吧,只有50行代码. 摘自:http://www.oschina.net/code/snippet_55577_3887 import ...
- HTML5游戏实战(1):50行代码实现正面跑酷游戏
前段时间看到一个"熊来了"的HTML5跑酷游戏,它是一个典型的正面2D跑酷游戏,这里借用它来介绍一下用Gamebuilder+CanTK开发正面跑酷游戏的基本方法. CanTK(C ...
- 50行代码实现GAN | 干货演练
2014年,Ian Goodfellow和他的同事发表了一篇论文,向世界介绍了生成对抗网络(GAN).通过对计算图和博弈论的创新性组合,他们表明如果有足够的建模能力,两个相互对抗的模型可以通过普通的反 ...
- 基于requirejs+bluebird,50行代码实现轻巧实用的前端CMD加载器
首先是github地址,可以用git克隆命令也可以直接在git页面下载 https://github.com/kazetotori/js-requireAsync 下载下来后目录结构是这样的 -pac ...
- [Lua]50行代码的解释器,用来演示lambda calculus
嗯,来写写经过: 在知乎上看见用Belleve牛用javascript写了一个精简的lisp解释器 => 我也想写一个,用lua写,能多简单呢? => 写了一个阉割的scheme解释器,包 ...
- OpenCV图像识别初探-50行代码教机器玩2D游戏【华为云技术分享】
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/devcloud/article/detai ...
- 50行代码实现的高性能动画定时器 raf-interval
写在前面 raf-interval 是基于 window.requestAnimationFrame() 封装的定时器. Github: https://github.com/dntzhang/raf ...
随机推荐
- 二分法 organ Saltless
organ [描述] 现在某组织中(记作R)有n个人,他们的联络网形成一棵以Saltless为根的树,有边相连代表两人可以直接联络. 每个人有一个代号,Saltless代号为1,且除Saltless外 ...
- codeforces 721B B. Passwords(贪心)
题目链接: B. Passwords time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
- jquery中attr和prop的区别(转)
在网络上看到这样一篇关于jquery中attr和prop的区别文章,觉得不错,所以转载了. 在jQuery 1.6中,.attr()方法查询那些没有设置的属性,则会返回一个undefined.如果你要 ...
- leetcode: Path Sum II 迭代法
Given a binary tree and a sum, find all root-to-leaf paths where each path's sum equals the given su ...
- 纯js和纯css+html制作的手风琴的效果
一:纯css+html的手风琴效果 这种用css写的手风琴比较简单,主要是应用到css中的,transition属性. 代码如下: <!DOCTYPE HTML> <html> ...
- Android 手势识别类 ( 三 ) GestureDetector 源码浅析
前言:上 篇介绍了提供手势绘制的视图平台GestureOverlayView,但是在视图平台上绘制出的手势,是需要存储以及在必要的利用时加载取出手势.所 以,用户绘制出的一个完整的手势是需要一定的代码 ...
- 基于PXC的MySQL高可用环境简单部署
PXC简介 Percona XtraDB Cluster(简称PXC集群)提供了MySQL高可用的一种实现方法. 1.集群是有节点组成的,推荐配置至少3个节点,但是也可以运行在2个节点上. 2.每个节 ...
- 异常:NSException和NSAssert的简单使用
//断言 - (void)NSAssert_Test:(NSString *)string{ NSAssert(string == nil, @"string == kong or nil& ...
- tftp从linux下载文件
1,背景: 当我们ssh到一台linux上时候,从linux上下载一些文件,方案如下: 1.1通过sftp:通过win7 ftp客户端连接到linux去下载文件. 1.2通过tftp 2,问题 有些l ...
- android.hardware.Camera类及其标准接口介绍
android.hardware.Camera类及其标准接口介绍,API level 19 http://developer.android.com/reference/android/hardwar ...