Backbone.js学习之旅（一）
前言
刚到粑粑公司，就学习各种框架，进行各种开发，为了纪念挥泪的青春，只好写下……
希望能合您胃口^_^!!!
The First（文件准备）
backobone 强制依赖于 underscore.js ， 非强制依赖于 jQuery。
underscore下载地址：http://www.css88.com/doc/underscore/;
backbone下载地址：http://www.css88.com/doc/backbone/;
创建目录结构如下（您所看到的js文件均是第三方库文件）：
index.html 导入文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Backbone起步</title>
</head>
<body> <script type="text/javascript" src="js/jquery-1.8.0.min.js" ></script>
<script type="text/javascript" src="js/underscore.min.js" ></script>
<script type="text/javascript" src="js/backbone.min.js" ></script> </body>
</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。
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Backbone起步</title>
<style>
#person {
width: 200px;
height: 200px;
color: white;
background-color: #0055aa;
}
input {
width: 300px;
height: 30px;
border-radius: 5px;
}
</style>
</head>
<body> <!--============html代码========================-->
<div>
<input type = text id = "addStudentIpt" placeholder="在此输入学生姓名，按Enter进行添加"/>
</div><br>
<div id = "studentList">
<!--这里是所有新同学的列表-->
</div> <!--==========引入文件==========================-->
<script type="text/javascript" src="js/jquery-1.8.0.min.js" ></script>
<script type="text/javascript" src="js/underscore.min.js" ></script>
<script type="text/javascript" src="js/backbone.min.js" ></script>
<script type="text/javascript" src="js/backbone.localStorage.js" ></script> <!--==========待渲染的模板======================-->
<script type="text/template" id = "person-template">
<div class = "oneStudent">
你好， 我叫<%= name %>!
</div>
</script> <!--==========核心代码======================-->
<script>
/*
* 模型：学生
*/
var Student = Backbone.Model.extend({
//设置学生的属性
defaults: {
name: "stone"
}
}); /*
* 集合： 学生集
*/
var Students = Backbone.Collection.extend({
//学生集合中的模型为学生
model: Student,
//使用LocalStorage来保存数据
localStorage: new Backbone.LocalStorage("msg-backbone")
}); /*
* 视图： 单个学生视图
*/
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;
}
}); /*
* 视图： 全局视图
*/
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);
} }); var view = new AppView;
</script>
</body>
</html>
Backbone.js学习之旅（一）的更多相关文章
- 【转】Backbone.js学习笔记（二）细说MVC
文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Bac ...
- Backbone.js学习之二
经历一段自我修炼,终于领悟到Backbone.js的关键知识点,也发现了原来MVC可以在前端这样梦幻的发挥,Backbone.js确实是一个很有魅力的前端MVC框架. 练就一门技术,需要有扎实的功底, ...
- Backbone.js学习之一
昨天一个我崇拜的朋友,徐飞送我一本名为<Backbone.js实战>书,让我心中狂喜,于是带着这份浓厚的兴趣,开始研究Backbone.js之路. 打开这本书的第一句话就很有哲理,“授人以 ...
- backbone.js学习笔记
之前只接触过jQuery,看来Backbone是除了jQuery的第二大JS框架... backbone到底是个啥? 其实刚开始我也不知道=_=,我是这周二才听说居然还有这么个框架...于是乎我的导师 ...
- Backbone.js学习之初识hello-world
说了好久好久要学习Backbone.js,现在终于下定决心开始学习了.然后呢,就根据我的学习进度在这里做个简单的记录,方便新人,也方便我自己以后回忆. 准备 用bower下载这几个库或框架也是醉了.. ...
- 【转】Backbone.js学习笔记（一）
文章转自: http://segmentfault.com/a/1190000002386651 基本概念 前言 昨天开始学Backbone.js,写篇笔记记录一下吧,一直对MVC模式挺好奇的,也对j ...
- Backbone.js学习之Backbone.View（视图）
Backbone.js为复杂WEB应用程序提供模型(models).集合(collections).视图(views)的结构.其中模型用于绑定键值数据和自定义事件:集合附有可枚举函数的丰富API: 视 ...
- Backbone.js学习之View
千呼万唤始出来,终于到最后一个要点View了.照旧,先来一睹官方文档: Backbone views are almost more convention than they are code - t ...
- Backbone.js学习之Collection
首先,当然是一如既往地看官方文档的解释. Collections are ordered sets of models. 翻译: Collections是models的一个集合. 关于book和boo ...
随机推荐
- CSS基础和选择器
什么是CSS? CSS是指层叠样式表(Cascading Style Sheets),样式定义如何显示HTML元素,样式通常又会存在于样式表中.也就是说把HTML元素的样式都统一收集起来写在一个地方或 ...
- Ubuntu 16 桌面版使用笔记
版本:16.04.2-Ubuntu 软件安装 常用软件 sudo apt-get install curl wget htop git vim 搜狗输入法 wget http://cdn2.ime.s ...
- 远程连接服务器或云数据库上的mysql服务 - 赖大大
主要问题有两种: 1.mysql的权限问题. 2.服务器的防火墙和数据库的安全组没设好的问题. 1.权限问题: 首先登录上mysql mysql> use mysql; #使用mysq ...
- Java并发编程笔记之AbstractQueuedSynchronizer源码分析
为什么要说AbstractQueuedSynchronizer呢? 因为AbstractQueuedSynchronizer是JUC并发包中锁的底层支持,AbstractQueuedSynchroni ...
- 深入学习python解析并读取PDF文件内容的方法
这篇文章主要学习了python解析并读取PDF文件内容的方法,包括对学习库的应用,python2.7和python3.6中python解析PDF文件内容库的更新,包括对pdfminer库的详细解释和应 ...
- 使用centos 7安装conpot
使用CentOS的版本7.3和Conpot 0.5.1(也可能适用于其他CentOS的版本) 1.通过ssh登录系统,并需要具有足够的系统特权(e.g root) 2.系统升级 yum -y upda ...
- 来自于一个问题的回答对自己的反思 php怎么发送邮件?发送邮件插件PHPMailer
前言: 昨天用手机无意点了一下博问,看见了一个朋友问了一个关于php发邮件不能添加发件人名称的问题,试着看了一下代码,觉得自己发现了问题所在,谁知道只是一知半解没有真正发现问题所在,看来有一段时间没有 ...
- 【学习笔记】剖析MVVM框架，简单实现Vue数据双向绑定
前言: 学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程.最近一直在学vue框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...
- [HNOI2018] 道路
Description 给一棵二叉树,每个叶子节点 \(i\) 有三个属性 \(a_i,b_i,c_i\) 每个非叶子节点都能标记向左右儿子中的一条边(记作 \(x\) 边和 \(y\) 边) 设叶子 ...
- Java语法之反射
一.反射机制 在前面Java语法之注解自定义注解时我们也有提到反射,要获取类方法和字段的注解信息,必须通过Java的反射技术来获取 Annotation对象.那什么是反射呢?JAVA反射机制是在运行状 ...