标签:
前言
刚到粑粑公司,就学习各种框架,进行各种开发,为了纪念挥泪的青春,只好写下……
希望能合您胃口^_^!!!
The First(文件准备)
backobone 强制依赖于 underscore.js , 非强制依赖于 jQuery。
underscore下载地址:http://www.css88.com/doc/underscore/;
backbone下载地址:http://www.css88.com/doc/backbone/;
创建目录结构如下(您所看到的js文件均是第三方库文件):
index.html 导入文件:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>Backbone起步</title> 6 </head> 7 <body> 8 9 <script type="text/javascript" src="js/jquery-1.8.0.min.js" ></script> 10 <script type="text/javascript" src="js/underscore.min.js" ></script> 11 <script type="text/javascript" src="js/backbone.min.js" ></script> 12 13 </body> 14 </html>
The Second (分步解说)
既然是起步,就先从backbone最常用的模块儿说起: model , collection, view。
model: 好比学生
Collection: 好比一群学生
view: 好比把这群学生的信息呈现出来
界面功能描述(界面是有点丑了……^_^别介): 在输入框里输入姓名(如:石头),按下Enter键,即可添加 “你好,我叫石头” 到 页面中
html 代码:
<div> <input type = text id = "addStudentIpt" placeholder="在此输入学生姓名,按Enter进行添加"/> </div><br> <div id = "studentList"> <!--这里是所有新同学的列表,存放 div class = oneStudent--> </div>
代码片段1:模板
<script type="text/template" id = "person-template"> <div class = "oneStudent"> 你好, 我叫<%= name %>! </div> </script>
针对模板,我有一个特别通俗的理解,凡是界面里面 需要数据更新 的地方,大都需要设置为模板,以供View通过template实时更新。
细心的同学可以发现,模板里面的内容和html很像,没错,就是html升级版,只是可以添加js代码,只是多了js可以更改的变量,用 <%= %> 包裹,那这些变量如何来呢?请看下面分析。
代码片段2:
/* * 视图: 单个学生视图 */ var StudentView = Backbone.View.extend({ tagName: ‘div class = "oneStudent"‘, template: _.template($("#person-template").html()), initialize: function() { }, render: function() { this.$el.html(this.template(this.model.toJSON())); return this; } });
视图,顾名思义,就是做和界面相关的事儿。比如说:渲染界面(render),给html传数据。
tagName: 就是view 中的 el,官方解释是:“所有的视图都拥有一个 DOM 元素(el 属性),即使该元素仍未插入页面中去。” 和 “this.el 可以从视图的 tagName, className, id 和attributes 创建,如果都未指定,el 会是一个空 div。” StudentView 的 el 就是通过tagName创建的。
template: 知道template是啥意思不? 啊?不知道? No problem! 我就叫它 【模板】 的定义。 _.template($("#person-template").html()) 中的 _. 就是underscore的代号,好比$表示jquery。 而template就是underscore中的一个方法。连起来就是 _.template()。 至于_.tempalte()里面的东东,自然就是代码片段1 中写的模板了,这里要拿过来给js用。记得 这_.template()中的 id 要和 代码片段1中的 id 保持一样哦! 呼呼……这里扯的有点多了!赶紧,跟上!
initialize: 这里没写东西,不是就没用,只是暂时不用。强大的功能请看下文。 ^_^
render: 大boss终于来啦,渲染!这里渲染完成后,直接返回this(该视图,以供AppView使用,如:view.render().el)。 this.$el.html(this.template(this.model.toJSON())); 别看这是一句话,其实是2句哦!^_^ this.$el.html(); 和 this.template(this.model.toJSON())。 前一句话的意思,就是要把该视图的html内容设置为 第二句话 渲染 返回的 html。 第二句话 this.template()就是要把 代码片段1 需要的参数(name) 传过去。 可是,呜呜~~~~(>_<)~~~~ this.model.toJSON() 是什么玩意儿? this.model 就是 创建该 StudentView 的时候需要传入的参数(想知道怎么传的吗?请看代码片段4),也就是最前面定义的 Student (model)模型。代码如下:
代码片段3:
/* * 模型:学生 */ var Student = Backbone.Model.extend({ //设置学生的属性 defaults: { name: "stone" } });
该模型经过toJSON转换,自然就有了代码片段1所需的 name 参数。
唉,终于扯完一丢丢了,小女有点手酸了……大家还有疑问的,随时@哦。。。^_^
代码片段4:
var AppView = Backbone.View.extend({ el: ‘body‘, initialize: function() { //获取jquery对象 this.input = this.$("#addStudentIpt"); this.studentList = this.$("#studentList"); //实例化集合(学生集) this.students = new Students(); //添加监听事件 this.listenTo(this.students, ‘add‘, this.showNewStudent); //获取添加后保存的学生信息 this.students.fetch(); }, //事件代理 events:{ "keypress #addStudentIpt": "addStudent" }, //向集合里添加新同学 addStudent: function(e) { if(e.keyCode === 13){ var stdName = this.input.val(); //使用集合创建新学生,会出发add事件 this.students.create({name: stdName}); } }, //在界面上显示添加的新同学,参数student为 this.students集合中的一个模型 showNewStudent: function(student) { var view = new StudentView({model: student}); this.studentList.append(view.render().el); } });
这个View 主要是用于把控全局界面。比如:添加一个StudentView。代码虽多,但就不全说了。相信聪明的你根据注释,也基本上懂的大概了。
this.students: 集合Students 的一个实例。
this.students.create(): 集合创建模型的一个方法。
啦啦啦……第一篇“巨著”终于完咯……想继续后面的学习吗?请看下文…… 若无下文,献上亲亲一个^_^,嘻嘻,就有咯……
The Third(第一个实例): Hello, 石头!
由于需要保存数据在本地,所以引入locaStorage.js。
完整代码:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>Backbone起步</title> 6 <style> 7 #person { 8 width: 200px; 9 height: 200px; 10 color: white; 11 background-color: #0055aa; 12 } 13 input { 14 width: 300px; 15 height: 30px; 16 border-radius: 5px; 17 } 18 </style> 19 </head> 20 <body> 21 22 <!--============html代码========================--> 23 <div> 24 <input type = text id = "addStudentIpt" placeholder="在此输入学生姓名,按Enter进行添加"/> 25 </div><br> 26 <div id = "studentList"> 27 <!--这里是所有新同学的列表--> 28 </div> 29 30 <!--==========引入文件==========================--> 31 <script type="text/javascript" src="js/jquery-1.8.0.min.js" ></script> 32 <script type="text/javascript" src="js/underscore.min.js" ></script> 33 <script type="text/javascript" src="js/backbone.min.js" ></script> 34 <script type="text/javascript" src="js/backbone.localStorage.js" ></script> 35 36 <!--==========待渲染的模板======================--> 37 <script type="text/template" id = "person-template"> 38 <div class = "oneStudent"> 39 你好, 我叫<%= name %>! 40 </div> 41 </script> 42 43 <!--==========核心代码======================--> 44 <script> 45 /* 46 * 模型:学生 47 */ 48 var Student = Backbone.Model.extend({ 49 //设置学生的属性 50 defaults: { 51 name: "stone" 52 } 53 }); 54 55 /* 56 * 集合: 学生集 57 */ 58 var Students = Backbone.Collection.extend({ 59 //学生集合中的模型为学生 60 model: Student, 61 //使用LocalStorage来保存数据 62 localStorage: new Backbone.LocalStorage("msg-backbone") 63 }); 64 65 /* 66 * 视图: 单个学生视图 67 */ 68 var StudentView = Backbone.View.extend({ 69 tagName: ‘div class = "oneStudent"‘, 70 template: _.template($("#person-template").html()), 71 initialize: function() { 72 73 }, 74 render: function() { 75 this.$el.html(this.template(this.model.toJSON())); 76 return this; 77 } 78 }); 79 80 /* 81 * 视图: 全局视图 82 */ 83 var AppView = Backbone.View.extend({ 84 el: ‘body‘, 85 initialize: function() { 86 //获取jquery对象 87 this.input = this.$("#addStudentIpt"); 88 this.studentList = this.$("#studentList"); 89 90 //实例化集合(学生集) 91 this.students = new Students(); 92 93 //添加监听事件 94 this.listenTo(this.students, ‘add‘, this.showNewStudent); 95 96 //获取添加后保存的学生信息 97 this.students.fetch(); 98 }, 99 //事件代理 100 events:{ 101 "keypress #addStudentIpt": "addStudent" 102 }, 103 //向集合里添加新同学 104 addStudent: function(e) { 105 if(e.keyCode === 13){ 106 var stdName = this.input.val(); 107 //使用集合创建新学生,会出发add事件 108 this.students.create({name: stdName}); 109 } 110 }, 111 //在界面上显示添加的新同学,参数student为 this.students集合中的一个模型 112 showNewStudent: function(student) { 113 var view = new StudentView({model: student}); 114 this.studentList.append(view.render().el); 115 } 116 117 }); 118 119 var view = new AppView; 120 </script> 121 </body> 122 </html>
标签:
原文地址:http://www.cnblogs.com/codelovers/p/4674157.html