通过helloworld来认识下backbone - Ruthless
- - 博客园_RuthlessBackbone主要涉及3部分：model，collection和view. 而这个框架的优势在于：数据与视图分离，通过操作model来自动更新view. 根据我的个人经验，直接写个简单的例子是最最直观的，那么从hello world开始吧. 程序目标：创建人员，将人员添加入队伍，删除人员，清空队列.
通过helloworld来认识下backbone - Ruthless
标签：
helloworld
认识
backbone
| 发表时间：2014-03-07 14:14 | 作者：Ruthless
出处：
Backbone主要涉及3部分：model，collection和view。而这个框架的优势在于：数据与视图分离，通过操作model来自动更新view。
根据我的个人经验，直接写个简单的例子是最最直观的，那么从hello world开始吧！
程序目标：创建人员，将人员添加入队伍，删除人员，清空队列。
步骤1. model，理解成一个数据个体。
var People = Backbone.Model.extend({
//每个人都有他自身的属性
defaults : {
"name" : '阿三'
}
});
//每个人都有他自身的属性
defaults : {
"name" : '阿三'
}
});
步骤2. collection，理解成数据队列。
var Peoples = Backbone.Collection.extend({
//对集合的类型进行设定，这里设定为人的集合
model : People
});
//对集合的类型进行设定，这里设定为人的集合
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();
}
});
//设定这个视图的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
});
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>
<%
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】。
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
本文链接： http://www.cnblogs.com/linjiqin/p/3586342.html，转载请注明。
相关 [helloworld 认识 backbone] 推荐：
backbone 之事件(events)
- - 博客园_首页 最近用 backbone 做了一个项目，加深了对前端mvc理解. 一定要应用的熟练后，了解其思想后，再去阅读源码. 想写写自己对backbone的感悟. 接下来第一步就是backbone的event. backbone的event 是其核心. 当我们user调用create 就会触发change事件.
springbatch简介与helloworld
- - CSDN博客推荐文章一、SpringBatch简介. Spring Batch是一个轻量级的批处理框架, 可以用于企业级海量数据处理, 它提供以下技术解决方案:. 二、SpringBatch结构. Spring Batch由应用层、核心层、基础架构层等组成:. 应用层: 包含所有的批处理作业, 使用spring框架管理程序员自定义的代码.
百度地图API--HelloWorld
- - CSDN博客推荐文章百度地图API--Hello World. 这里引用一个经典的单词"Hello World"，这个词是程序界所有人都很熟悉的，我在开始学习Java的时候就是从这开始的，什么编写一个Hello World程序，甚至有的面试题中有“写一个输出Hello World的程序”来测试面试者的面向对象的思维.
【PHP框架CodeIgniter学习】Helloworld
- - CSDN博客推荐文章在想做API的时候 ，在搜索发现大家都钟爱推荐 CodeIgniter 这个轻量级开发框架，于是乎就搜索了一番. 原来CodeIgniter 简称CI，开源框架，好像很多的CMS系统都是基于它进行二次开发的. 自己之前使用过的PHP框架有 ThinkPHP,PHPWind等，感觉有点复杂（可能是自己不大熟悉PHP的原因）.
Hadoop HelloWorld Examples - 单表连接
- - CSDN博客云计算推荐文章 应该是那本"Hadoop 实战"的第4个demo了，单表连接. 给出一对对的children和parents的名字，然后输出所有的grandchildren和grandparents对. 输入数据（第一列child，第二列 parent）. 输出数据(第一列grandchild,第二列grandparents).
CXF 入门：HelloWorld接口发布
- - ITeye博客第一步：在myeclipse中新建一个web项目名为myWs,. 并导入依赖的jar包（cxf,spring,apache-commons相关）. cxf结合spring时所需jar包，此例子也需要这些，用到了spring上下文加载. 第二步：在WEB-INF中创建基本的cxf-beans.xml内容如下(作用：主要做webservice接口属性配置,通过web.xml配置加载，文件名和位置可以顺便，web.xml配置会用到).
DNSPod国内版全新亮相:前端使用Backbone技术
- - cnBeta.COM国内最大第三方DNS解析服务商DNSPod国内新版于2012年元旦正式上线公测. 前端大胆使用Backbone.js框架，旨在为用户提供优质客户体验. DNSPod此次改版前端使用了Backbone.js，Seajs以及Mustache等先进技术. 其中Backbone的使用最为大胆，它是结合jQuery来构建复杂的 Web 前端交互应用.
【转贴备忘】[教程]iPhone 實機開發 Part 1 - HelloWorld
- zii - 博客园-oiramario最近小弟開始在研究 iPhone 的開發,無奈找到的資料都是舊的,也不知道怎麼放到 iPhone 上,應該很多人都跟我有同樣的困擾吧!經過幾天的研究總算寫出第一個 HelloWorld,而且可以不用付99元美金就可以放到實機上執行. 今天先和大家分享怎麼放到手機上,以及基本的 Xcode 使用:. iPhone 港版16G+FW2.2+越獄.
酷酷的前端MVC框架AngularJS(二)HelloWorld
- - ITeye博客angularJS在github上面进行一个代码的托管. 地址：https://github.com/angular/angularjs.org . 注意：需要兼容IE8的同学请下载1.3之前的版本，在1.3之后已经放弃了IE8，估计是为了以后大版本升级做铺垫吧. 各个版本的下地址在这里https://github.com/angular/angular.js/releases.