通过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】。
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。