Backbone Backbone-localStorage demo
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="lib/json2.js"></script>
<script src="lib/jquery-latest.js"></script>
<script src="lib/underscore.js"></script>
<script src="lib/backbone.js"></script>
<script src="lib/backbone.localStorage.js"></script>
</head>
<body>
<style>
span{display: block;}
</style>
<p id="app"></p>
<button id="btn">Click</button>
<script src="js/demo.js"></script>
</body>
</html>
js:
var DemoModel = Backbone.Model.extend({
defaults: {
name: "King-fly",
age: 23
}
});
var DemoCollection = Backbone.Collection.extend({
model: DemoModel,
localStorage: new Backbone.LocalStorage("Demotodo"),
initialize: function() {
this.on("add", this.triAdd);
},
triAdd: function() {
console.log("DemoCollection add method");
},
done: function(name) {
return this.where({name: name})
}
});
var demoCollection = new DemoCollection;
var SpanView = Backbone.View.extend({
tagName: "span",
initialize: function() {
this.render();
this.$el.bind("click",this.clear);
this.listenTo(this.model, "destroy", this.remove)
},
render: function() {
this.$el.html(_.template("My name is <%= name %>,my age is <%= age %>", this.model.toJSON()));
return this;
},
clear: function() {
this.remove();
console.dir(this);
}
});
var DemoView = Backbone.View.extend({
el: "body",
counter: 0,
events: {
"click button#btn": "btnClick",
"click button#clear": "clearData"
},
initialize: function() {
this.listenTo(demoCollection, "add", this.addOne);
// this.listenTo(demoCollection, "")
demoCollection.fetch();
},
clearData: function() {
_.invoke(demoCollection.done("Wuhan"), "destroy");
},
render: function() {
},
btnClick: function() {
demoCollection.create({name: "Wuhan", age: 23 + this.counter++});
},
addOne: function(demoModel) {
var view = new SpanView({model: demoModel})
$("#app").append(view.render().el);
},
addAll: function() {
demoCollection.each(this.addOne, this);
}
})
var demoView = new DemoView();
Backbone 应用的关键点是要理清需求的流程，每个View 层的操作对象都有自己的执行逻辑， 理解各View层之间的关系对处理Model层来说至关重要。而作为数据的操作层Collection来说，起相关联数据所展现的复杂度随着view层的增加不断增加。因此控制好collection层显得至关重要。
由于Backbone 是基于Underscore库为基础的，作为函数库的underscore需要更深层次的了解。
Backbone Backbone-localStorage demo的更多相关文章
- HTML5 LocalStorage Demo
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
- [backbone]backbone.js
学习文档: 开始学习 Backbone http://www.ibm.com/developerworks/cn/web/wa-backbonejs/
- (转)初探Backbone
(转)http://www.cnblogs.com/yexiaochai/archive/2013/07/27/3219402.html 初探Backbone 前言 Backbone简介 模型 模型和 ...
- TodoMVC中的Backbone+MarionetteJS+RequireJS例子源码分析之一
Marionette牵线木偶,Backbone是脊骨的意思,Marionette是基于Backbone做扩展库,可以理解为把脊骨骨架绑线扯着变成牵线木偶动起来哈哈,使backbone更易使用呵呵! 构 ...
- Django+Tastypie作后端，Backbone作前端的TodoMVC
TodoMVC是各种js框架入门的比较经典的例子,详细可查看github地址https://github.com/tastejs/todomvc 接着上篇文章, 1,先在github上把backbon ...
- 初探Backbone
Backbone简介 中文API:http://www.csser.com/tools/backbone/backbone.js.html 英文API:http://backbonejs.org/ B ...
- [转]backbone.js 初探
本文转自:http://weakfi.iteye.com/blog/1391990 什么是backbone backbone不是脊椎骨,而是帮助开发重量级的javascript应用的框架. 主要提供了 ...
- requirejs、backbone.js配置
requirejs初探 参考资料官网:http://requirejs.org中文译文:http://makingmobile.org/docs/tools/requirejs-api-zh reuq ...
- undercore & Backbone对AMD的支持（Require.js中如何使用undercore & Backbone）
RequireJS填补了前端模块化开发的空缺,RequireJS遵循AMD(异步模块定义,Asynchronous Module Definition)规范,越来越多的框架支持AMD,像最近的jQue ...
- Backbone实例todos分析
源码来自:http://todomvc.com/examples/backbone/ 这是一个用Backbone.js完成的待办事项实例,精简但完善,可以帮助很好的帮助理解Backbone的API,M ...
随机推荐
- 【转】PLSQL developer 连接不上64位Oracle 的解决方法
PLSQL developer 连接不上64位Oracle 的解决方法 快乐无极 , 2012/06/13 10:10 , 开发文档 , 评论(6) , 阅读(140430) , Via 本站原创 大 ...
- android开发 无预览定时拍照
demo实现功能: 打开主页面自动启动定时拍照,10s拍一次. 注意事项,初始化摄像头之后不能立即拍照,否则无效,必须等待几秒后才能拍.这里用的是Handler进行延时处理拍照消息的. package ...
- 项目开发-->一键登录功能汇总
开发网站经常会提供一些一键登录功能,如:QQ.新浪微博.淘宝账号.开心网账号.人人网账号等进行快捷登录,下面记录几个常用的开放平台地址,方便以后开发需要. 1.QQ互联 2.新浪微博 网站接入QQ互联 ...
- HDU 5800 To My Girlfriend 背包
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5800 To My Girlfriend Time Limit: 2000/2000 MS (Java ...
- OrzFAng系列–树 解题报告
题目描述 方方方种下了三棵树,两年后,第二棵树长出了n个节点,其中1号节点是根节点. 给定一个n个点的树 支持两种操作 方方方进行m次操作,每个操作为: (1)给出两个数i,x,将第i个节点的子树中, ...
- （摘抄）HTTP 协议详解
这个是从网上摘抄下来的,原文链接在最底下,原文写的比较详细,我这里只取了一部分自己想要的 什么是HTTP协议 协议是指计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则,超 ...
- jQuery1.9.1--attr,prop与val方法源码分析
这里只介绍这几个方法的源码,这部分引用了一个技巧,钩子对象,用来做兼容fixed的对象,后面也有一些使用.钩子对象具体的兼容细节这里就不详解了. var nodeHook, boolHook, rcl ...
- mydate97时间控件最大值最小值限制及Javascript日期判断大小
<script language="javascript" type="text/javascript" src="<%=basePath ...
- PHP 使用 Redis
PHP 使用 Redis 安装 开始在 PHP 中使用 Redis 前, 我们需要确保已经安装了 redis 服务及 PHP redis 驱动,且你的机器上能正常使用 PHP. 接下来让我们安装 PH ...
- HDU4512完美队形I && HDU1423 Greatest Common Increasing Subsequence (LCIS)
填坑的时候又到啦,校赛因为不会LCIS所以吃了大亏,这里要补起来.LCIS就是在两个串里找最长上升子序列,相关的博客有很多,这里自己就不写那么多了. http://www.cnblogs.com/ja ...