backbone.js 教程(1) View & Model & Collection
Backbone.js Overview
- 它由Jeremy Ashkenas开发，最初发行于2010-10-13
- 它是一个轻量的JavaScript类库，只依赖于underscore.js，非强制依赖于jquery，大小只有7.6Kb，作为一个框架级的js文件，它已经非常小了
- 它提供了Model-View-Presenter(MVP)的框架模式，可以帮助前端开发搭建一个层次清晰的Web应用框架
- 它提供了models和collections来封装数据结构，提供了views来操作DOM，提供了自定义事件将数据结构和DOM操作绑定在一起
Environment Setup
要完整使用BackboneJS，需要引入以下js
- Underscore.js(>= 1.8.3)或者lodash.js
- Jquery.js(>= 1.11.0)
- Json2.js(如果需要支持IE)
在没有npm的环境下，可以下载压缩包或者使用CDN。
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.0/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
Bakbone.js View
负责操作DOM,采用 OO 的思想来操作一个视图。
Backbone.js View API
- extend 每一个自定义的View都必须由Backbone.View类extend而来，override父类中的属性
- initialize() View的构造函数，每当new一个实例时，就会调用该方法
- render() 通常将view的渲染逻辑写在此方法中，并在initialize中调用它
- template() View渲染时的模板，可以使用underscore的模板，也可以使用其他任意JS模板引擎
- el View对应的DOM对象，可以使用id选择器，类选择器来定义
- $el View对应的jQuery对象，方便使用jQuery的方法来操作DOM
- tagName View对应的DOM节点的标签名称，默认是“div”
- id View对应的DOM节点的id属性
- className View对应的DOM节点的class属性
- events 给View绑定事件
- remove() 移除一个view，其el将从DOM中移出，绑定的事件也将停止监听
Create a View
只需要扩展视图构造函数 Backbone.View, 传入Dom相关的属性。
示例 假如，需要在DOM中动态添加一个id=“root”的div。
不使用backbone.js，我们通常这样实现。
// app.js
function addRoot() {
var el = document.createElement('div');
el.id = 'root';
el.innerHTML = 'Hello Backbone!!!';
document.body.appendChild(el);
}
addRoot();
使用backbone.js，我们这样实现：
// app.js
var AppView = Backbone.View.extend({
tagName: 'div',
id: 'root',
initialize: function () {
this.render();
},
render: function () {
this.el.innerHTML = 'Hello Backbone!!!';
return this;
}
});
var appView = new AppView();
document.body.appendChild(appView.el);
- tagName 指定这个element 是一个div
- id 指定这个div的id属性值
- 当 调用 new AppView() 时，执行initialize() 函数
- render() 函数用于渲染这个element
Get Existed Element
假如，在html中已经定义了div#root这个element，想修改它的内容。
使用Backbone.js怎么来操作这个element呢？
// index.html
<body>
<div id="root">loading...</div>
</body>
var AppView = Backbone.View.extend({
el: '#root',
initialize: function () {
this.render();
},
render: function () {
this.el.innerHTML = 'Hello Backbone!!!';
return this;
}
});
var appView = new AppView();
Bind events
格式：
events: {
'event1 selector1': 'function name1',
'event2 selector2': 'function name2',
...
}
示例 有这样一个小应用，在input中输入后，回车，添加一个new goal；点击每一个goal后面的remove，移除此项目。
// index.html
<div id="root" class="color-dark">
<header>
<h2>My Life Goals</h2>
<input id="new-goal" type="text" placeholder="add a new goal">
</header>
<ul id="goal-list">
<li class="goal-item">Goal one <a class="btn-remove">remove</a></li>
<li class="goal-item">Goal two <a class="btn-remove">remove</a></li>
<li class="goal-item">Goal three <a class="btn-remove">remove</a></li>
<li class="goal-item">Goal four <a class="btn-remove">remove</a></li>
</ul>
</div>
- 给input绑定一个 keypress 事件
- 给每一个 .btn-remove 绑定一个click事件
// app.js
var AppView = Backbone.View.extend({
el: '#root',
… …
events: {
'keypress #new-goal': 'addGoal',
'click .btn-remove': 'clear',
},
addGoal: function(ev) {
if (ev.keyCode != 13) return;
console.log('addGoal');
// To do
},
clear: function() {
// To do
}
});
var appView = new AppView;
How to change view
在引入Backbone.js的Model之前，我们可以这样来实现 addGoal 方法。
addGoal: function(ev) {
if (ev.keyCode != 13) return;
var newGoal = $('#new-goal').val();
if(newGoal === '') return;
var goalHtml = '<li class="goal-item">'+ newGoal +'<a class="btn-remove">remove</a></li>';
$('#goal-list').append(goalHtml);
$('#new-goal').val('');
}
在Backbone.js 出现之前，当数据发生变化视图需要重新渲染时，我们通常使用js或jQuery来进行DOM操作，改变展示的内容。
这样做data和视图渲染混在一起，显得很乱；而且，如果视图上要显示的属性很多，拼接的代码就很长很长。
所以，使用Backbone.js 的Model和Collection 将data和View 进行分离。
Bakbone.js Model & Collection
Model的作用
- 封装数据结构
- 处理业务逻辑
- 从server 加载、保存数据
- 当data发生变化时触发事件，比如重新渲染视图
Collection的作用
Collection是Model的有序集合，和Model一样用于数据加载、保存，监听数据变化，还可以使用 Underscore.js 提供的方法来操作Collection。
主要适用于list、table等视图的渲染。在本例中，就需要定义一个Collection来渲染列表，并监听Collection的变化。
定义Model和Collection
// Goal Model
var Goal = Backbone.Model.extend({
defaults: {
title: ''
}
});
// Goal Collection
var GoalCollection = Backbone.Collection.extend({
model: Goal,
});
使用template
下面这段代码，有一些地方是相同的，为了避免重复代码，可以使用模板来渲染。
<ul id="goal-list">
<li class="goal-item">Goal one <a class="btn-remove">remove</a></li>
<li class="goal-item">Goal two <a class="btn-remove">remove</a></li>
<li class="goal-item">Goal three <a class="btn-remove">remove</a></li>
<li class="goal-item">Goal four <a class="btn-remove">remove</a></li>
</ul>
在html中定义模板
把重复的部分抽出来，定义模板时使用<script>标签，但这里的type是text/template，然后给它一个id，用于在View中通过id来获取它。
<body>
<div id="root" class="color-dark">
<header>
<h2>My Life Goals</h2>
<input id="new-goal" type="text" placeholder="add a new goal">
</header>
<ul id="goal-list">
<!-- template -->
</ul>
</div>
<script type="text/template" id="item-template">
<li class="goal-item"><%= title %><a class="btn-remove">remove</a></li>
</script>
</body>
- <%= %>表示插入变量
- <% %>表示插入任意JS代码段
- <%- %>表示插值并进行转义
View中定义解析函数template()
在js中定义GoalView，用于生成每一个Goal对应的<li>节点。
BackboneJS中的template实际上调用的是underscore.js的template方法，该方法可以将 JavaScript 模板编译为可以用于页面呈现的函数，它返回的是一个函数。
_.template(templateString, [settings])
render时调用template
然后在render中调用template方法，把model对象作为参数传入。
// app.js
// Goal Model
var GoalModel = Backbone.Model.extend({
defaults: {
title: '' // 默认属性值
}
});
// Goal Collection
var GoalCollection = Backbone.Collection.extend({
model: GoalModel,
});
var GoalView = Backbone.View.extend({
tagName: 'li',
initialize: function () {
this.render();
},
template: function () {
return _.template($('#item-template').html()); //根据模板的id来获取模板定义的内容
},
render: function () {
this.$el.html(this.template()(this.model.toJSON()));
},
events: {
'click .btn-remove': 'clear', // 绑定事件
},
clear: function() {
// To do
}
});
var AppView = Backbone.View.extend({
el: '#root',
… …
events: {
'keypress #new-goal': 'addGoal',
},
addGoal: function(ev) {
if (ev.keyCode != 13) return;
console.log('addGoal');
// To do
},
});
测试效果：
var view = new GoalView({ model: {title: 'My first goal'} });
this.$("#goal-list").append(view.$el);
bind Collection to View
在AppView中，修改addGoal的添加模式，将原来的直接操作DOM，修改为通过data的变化来触发DOM的渲染。
- 在AppView中实例化一个GoalCollection，命名为goalList
- Keypress事件触发时，修改goalList，这里调用了Backbone.Collection中的push()方法
var AppView = Backbone.View.extend({
el: '#root',
initialize: function () {
this.goalList = new GoalCollection();
this.render();
},
render: function () {
return this;
},
events: {
'keypress #new-goal': 'addGoal'
},
addGoal: function (ev) {
if (ev.keyCode != 13) return;
var inputVal = $('#new-goal').val(); // 获取输入的值
if (inputVal === '') return;
this.goalList.push({ title: inputVal }); // push到Collection
$('#new-goal').val('');
},
});
但是，此时，你会发现虽然goalList发生了变化，但是页面并没有跟着渲染。
因为，View并没有对Collection的变化进行监听。
Model 和 Collection的事件监听
View 监听 Model或Collection的变化
在AppView中，通过listenTo()方法，监听Collection的变化，当Collection发生变化时，触发内部的某个方法。
object.listenTo(other, event, callback)
listenTo 用于一个对象，监听另一个对象的变化
停止监听使用stopListening
object.stopListening([other], [event], [callback])
监听add事件
var AppView = Backbone.View.extend({
el: '#root',
initialize: function () {
this.goalList = new GoalCollection();
this.render();
this.listenTo(this.goalList, 'add', this.addOne);
// or
// this.goalList.on('add', this.addOne, this);
},
render: function () {
return this;
},
events: {
'keypress #new-goal': 'addGoal'
},
addGoal: function (ev) {
if (ev.keyCode != 13) return;
var inputVal = $('#new-goal').val();
if (inputVal === '') return;
this.goalList.push({ title: inputVal });
// or this.goalList.add({ title: inputVal });
$('#new-goal').val('');
},
addOne: function (goal) {
var view = new GoalView({ model: goal });
this.$("#goal-list").append(view.$el);
}
});
这里为什么监听的event是 add，而不是 push?
因为push()方法底层其实调用的是add()方法。
this.goalList.push({ title: inputVal });
修改为
this.goalList.add({ title: inputVal });
效果相同
监听destroy事件
在上一步中，已经给GoalView绑定了Goal这个Model，那么在View中就可以使用Model来控制View的渲染。在GoalView中需要监听GoalModel的变化，goalModel移除时，销毁视图。
var GoalView = Backbone.View.extend({
tagName: 'li',
initialize: function () {
this.render();
this.listenTo(this.model, 'destroy', this.remove);
//or this.model.on('destroy', this.remove, this);
},
template: function () {
return _.template($('#item-template').html());
},
render: function () {
console.log('model', this.model.toJSON());
this.$el.html(this.template()(this.model.toJSON()));
},
events: {
'click .btn-remove': 'clear',
},
clear: function() {
this.model.destroy();
}
});
destroy model后，view 也会从DOM中移除，同时绑定的事件也会停止监听。
this.remove 是View 内置的函数。
remove()方法不仅可以从DOM中移除view对应的节点，同时还能停止节点上绑定的事件监听。
Model或Collection 自我监听变化
在AppView中，还可以通过调用on()方法，让Collection监听自己的变化。
object.on(event, callback, [context])
这种用法是自己监听自己。
如果想停止监听，使用off()方法
object.off([event], [callback], [context])
this.listenTo(this.goalList, 'add', this.addOne);
等效于
this.goalList.on('add', this.addOne, this);
this.listenTo(this.model, 'destroy', this.remove);
等效于
this.model.on('destroy', this.remove, this);
为什么要传入context?
因为调用on()方法的是this.goalList，如果不传入context，那么在addOne()调用时，默认的this指代的是this.goalList，而不是AppView的实例了。
因此，为了保证上下文都是View的实例，需要传入context。
使用 bind() 或 bindAll() 修改context
可以在使用on()时，不传入context，而使用 _.bind() 或 _.bindAll() 来绑定context
在使用bind时，必须使用bind返回的函数
// 使用 bind
initialize: function () {
this.render();
this.remove = _.bind(this.remove, this); // 返回值是一个函数
this.model.on('destroy', this.remove);
},
使用bindAll非常方便，不必考虑返回值
// 使用 bindAll
initialize: function () {
this.render();
_.bindAll(this, 'remove', 'clear'); // 可以同时改变多个函数的context
this.model.on('destroy', this.remove);
},
