通过helloworld来认识下backbone
Backbone主要涉及3部分：model，collection和view。而这个框架的优势在于：数据与视图分离，通过操作model来自动更新view。
根据我的个人经验，直接写个简单的例子是最最直观的，那么从hello world开始吧！
程序目标：创建人员，将人员添加入队伍，删除人员，清空队列。
步骤1. model，理解成一个数据个体。
var People = Backbone.Model.extend({
//每个人都有他自身的属性
defaults : {
"name" : '阿三'
}
});
步骤2. collection，理解成数据队列。
var Peoples = Backbone.Collection.extend({
//对集合的类型进行设定，这里设定为人的集合
model : People
});
步骤3. view，每个伟大的视图背后，都有默默的collection或者model。
var View = Backbone.View.extend({
//设定这个视图的dom元素，也可以通过设定tagName, className, id 或者 attributes。如果没有特别设定，Backbone会为它套上空的div标签
el : $("body"),
initialize : function() {
//集合的事件绑定
this.collection.bind("add", this.addOne);
this.collection.bind("remove", this.delOne);
},
//使用了jquery的on方法，提供对视图的事件代理
events : {
"click #add" : "add",
"click .del" : "del",
"click #clear" : "clear",
},
add : function() {
var name = prompt("请输入人名");
//创建一个新model
var people = new People({
'name' : name
});
//并添加到人员队列中,会触发collection的add事件
peoples.add(people);
},
del : function(obj) {
//获取要删除的是哪个model
var delWho = obj.currentTarget.id;
//会触发collection的remove事件
peoples.remove(delWho);
},
//当collection发生了add事件
addOne : function(model) {
//每个model会随机生成一个唯一的cid，用来识别，区分
$("#list").append("<li>" + model.get('name') + "说：hello world！<button class='del' id='" + model.cid + "'>删除</button></li>");
},
//当collection触发了remove事件
delOne : function(model) {
//使用jquery的remove方法，删除dom和解除绑定的事件
$('#' + model.cid).parent().remove();
},
//清空数据
clear : function() {
this.collection.reset();
this.clearAll();
},
//清空dom
clearAll : function() {
$('#list').empty();
}
});
步骤4. 程序入口
var peoples = new Peoples;
var app = new View({
collection : peoples
});
这个例子还是比较直观的。把每个人当作model，队伍为collection，我们看到的界面是view。view绑定了collection的加减事件。通过对collection的操作，自动更新视图。
完整代码：
<%@ page language="java" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<title>backbone.js-Hello World</title>
</head>
<body>
<button id="add">添加</button>
<button id="clear">清空</button>
<h3>队列</h3>
<ul id="list"></ul>
</body>
<script src="<%=path %>/demo/backone/jquery-1.8.3.js"></script>
<script src="<%=path %>/demo/backone/underscore-min.js"></script>
<script src="<%=path %>/demo/backone/backbone-min.js"></script>
<script type="text/javascript">
(function() {
//model,理解成一个数据个体
var People = Backbone.Model.extend({
//每个人都有他自身的属性
defaults : {
"name" : null
}
}); //collection，理解成数据队列
var Peoples = Backbone.Collection.extend({
//对集合的类型进行设定，这里设定为人的集合
model : People
}); //view，每个伟大的视图背后，都有默默的collection或者model
var View = Backbone.View.extend({
//设定这个视图的dom元素，也可以通过设定tagName, className, id 或者 attributes。如果没有特别设定，Backbone会为它套上空的div标签
el : $("body"),
initialize : function() {
//集合的事件绑定，用来自动更新视图
this.collection.bind("add", this.addOne);
this.collection.bind("remove", this.delOne);
},
//使用了jquery的on方法，提供对视图的事件代理
events : {
"click #add" : "add",
"click .del" : "del",
"click #clear" : "clear",
},
add : function() {
var name = prompt("请输入人名");
//创建一个新model
var people = new People({
'name' : name
});
//并添加到人员队列中,会触发collection的add事件
peoples.add(people);
},
del : function(obj) {
//获取要删除的是哪个model
var delWho = obj.currentTarget.id; //会触发collection的remove事件
peoples.remove(delWho);
},
//当collection发生了add事件
addOne : function(model) {
//每个model会随机生成一个唯一的cid，用来识别，区分
$("#list").append("<li>" + model.get('name') + "说：hello world！<button class='del' id='" + model.cid + "'>删除</button></li>");
},
//当collection触发了remove事件
delOne : function(model) {
//使用jquery的remove方法，删除dom和解除绑定的事件
$('#' + model.cid).parent().remove();
},
//清空数据
clear : function(){
this.collection.reset();
this.clearAll();
},
//清空dom
clearAll : function(){
$('#list').empty();
}
}); //实例化
var peoples = new Peoples;
var app = new View({
collection : peoples
}); })();
</script>
</html>
如果，您认为阅读这篇博客让您有些收获，不妨点击一下右下角的【推荐】。
如果，您希望更容易地发现我的新博客，不妨点击一下左下角的【关注我】。
如果，您对我的博客所讲述的内容有兴趣，请继续关注我的后续博客，我是【Ruthless】。
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
通过helloworld来认识下backbone的更多相关文章
- 搭建 Android 开发环境，初试HelloWorld (win7) （下） （转）
5. 创建AVD 为使Android应用程序可以在模拟器上运行,必须创建AVD. 在Eclipse菜单中,选择 Windows -> Android Virtual Device Manage ...
- Idea下用SBT搭建Spark Helloworld
没用过IDEA工具,听说跟Eclipse差不多,sbt在Idea其实就等于maven在Eclipse.Spark运行在JVM中,所以要在Idea下运行spark,就先要安装JDK 1.8+ 然后加入S ...
- 使用backbone的history管理SPA应用的url
本文介绍如何使用backbone的history模块实现SPA应用里面的URL管理.SPA应用的核心在于使用无刷新的方式更改url,从而引发页面内容的改变.从实现上来看,url的管理和页面内容的管理是 ...
- RequireJS与Backbone简单整合
前言 昨天我们一起学习了Backbone,最后做了一个备忘录的例子,说是做了不如说是看了下官方提供的例子,所以最终我感觉我们还是没能掌握Backbone,今天还得做个其它例子先. 然后前面也只是草草学 ...
- backbone学习总结（二）
今天来看下backbone的路由控制的功能.其实个人感觉backbone,模块就那么几个,熟悉它的框架结构,以及组成,就差不多. 废话不多说,我们来看看还剩下的功能. 关于路由和历史管理 通过 Bac ...
- zynq学习01 新建一个Helloworld工程
1,好早买了块FPGA板,zynq 7010 .终极目标是完成相机图像采集及处理.一个Window C++程序猿才开始学FPGA,一个小菜鸟,准备转行. 2,关于这块板,卖家的官方资料学起来没劲.推荐 ...
- backbone学习总结（一）
入职第三天,新公司项目用到backbone+underscore+require等框架,前两天把项目的开发环境都配置好啦,项目也能跑起来,现在准备好好学习公司自己的框架以及用到的框架,有点想吐槽,开发 ...
- Backbone框架浅析
Backbone是前端mvc开发模式的框架.它能够让view和model相分离,让代码结构更清晰简答,开发进度加快,维护代码方便.但是,现在出了一种mvvm框架,它是下一代前端mvc开发模式的框架,代 ...
- 【再探backbone 01】模型-Model
前言 点保存时候不注意发出来了,有需要的朋友将就看吧,还在更新...... 几个月前学习了一下backbone,这段时间也用了下,感觉之前对backbone的学习很是基础,前几天有个园友问我如何将路由 ...
随机推荐
- SVN的搭建及使用（三）用TortoiseSVN修改文件,添加文件,删除文件,以及如何解决冲突，重新设置用户名和密码等
添加文件 在检出的工作副本中添加一个Readme.txt文本文件,这时候这个文本文件会显示为没有版本控制的状态,如图: 这时候,你需要告知TortoiseSVN你的操作,如图: 加入以后,你的文件会变 ...
- js mouseover/out 要用mouseenter/leave 代替
js中 onmouseover/out 在进入离开绑定事件的子元素时,都会触发一次,因此项目中药尽量少用 可以使用onmouseenter/leave代替,它们在绑定事件上只会触发一次,不会重复触发
- 余弦相似性计算及python代码实现
A:西米喜欢健身 B:超超不爱健身,喜欢打游戏 step1:分词 A:西米/喜欢/健身 B:超超/不/喜欢/健身,喜欢/打/游戏 step2:列出两个句子的并集 西米/喜欢/健身/超超/不/打/游戏 ...
- opencv 边界确定函数
多边形逼近,用嘴贴切的多边形标识 void approxPolyDP(InputArray curve, OutputArray approxCurve, double epsilon, bool c ...
- 深入学习Heritrix---解析Frontier(链接工厂)（转）
深入学习Heritrix---解析Frontier(链接工厂) Frontier是Heritrix最核心的组成部分之一,也是最复杂的组成部分.它主要功能是为处理链接的线程提供URL,并负责链接处理完成 ...
- C++11新特性之右值引用(&&)、移动语义(move)、完美转换(forward)
1. 右值引用 个人认为右值引用的目的主要是为了是减少内存拷贝,优化性能. 比如下面的代码: String Fun() { String str = "hello world"; ...
- 【sqlite】错误代码整理
这两天为了一个问题折腾了好久,记载一下. SQLite语句一定要严格按例子来写,例如: "CREATE TABLE PunchData (Id Text primary key, Heigh ...
- openfaas cli 安装
1. 安装脚本 curl -sL https://cli.get-faas.com/ | sudo sh 备注安装完成之后如果没有 faas-cli 可以下载脚本,手工执行 2. 使用二进制 ...
- 关于ant及svnant的一点随记
在使用svnant的时候: 注意一下: 1.JDK版本,svnant目前更新到1.3.1,其中svnkit.jar是不支持1.7/1.8JDK的,容易出现各种错误 Ps:下载http://www.sv ...
- Ubantu 新建用户后没有生成对应文件夹
原命令:useradd python 改正后:useradd python -m 后成功在home目录下创建文件夹 原因: man useradd就可以看到如此介绍:Create the user´s ...