Backbone入门
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Backbone入门相关的知识，希望对你有一定的参考价值。
(一)Backbone简介
Backbone是一个轻量级的javascript MVC框架，压缩后只有23kb，不过它依赖于Underscore.js和jQuery这两个JS库。Backbone是由Jeremy Ashkenas创建的，Underscore.js也是他创建的，他还创建了CoffeeScript这门优雅的JS转译语言。
模型(Model)是Backbone中的一个关键组件，Model用来存储应用的所有数据，以及直接和数据操作相关的逻辑，包括数据存储，数据验证，以及数据发生变动时触发相关动作。无论何时一个UI动作导致了模型属性的变化，模型都会触发change事件，这时用来展示模型状态的视图(View)会收到反馈，并做出相应的响应，重绘UI。你不用写那些胶水代码去更新你的DOM，比如通过元素id去找到某个元素，然后对其进行操作。只要模型改变了，视图就会更新。
视图(View)是用来把模型中的数据显示到页面上的，同时也可以监听DOM上的事件然后做出响应。
集合(Collection)是model对象的一个有序的集合。
(二)模型(Model)
使用Backbone之前要引入以下三个JS文件：
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
1.创建一个model
var Person = Backbone.Model.extend({
initialize: function(){
alert(‘Hello world!‘);
}
});
var person = new Person;
创建了一个Model对象Person，并在初始化的时候输出“Hello world!”,接着定义了一个Person对象的实例person，执行以上代码会在页面弹出“Hello world!”的框。
2.设置model属性
var Person = Backbone.Model.extend({
initialize: function(){//实例化时会执行这里的代码
alert(‘Hello world!‘);
}
});
//在实例化model时设置
var person = new Person({
name: ‘Jack‘,
age: 20
});
//也可以在model实例化后，通过set方法进行设置
var person = new Person;
person.set({
name: ‘Elizabeth‘,
age: 18
});
person.set(‘age‘, 22);//设置单个属性
这里提供了设置model指的三种方式：实例化时设置、通过set方法设置多个属性、通过set方法设置单个属性。
3.获取model属性
var Person = Backbone.Model.extend({
initialize: function(){
console.log(‘Hello world!‘);
},
aboutMe: function(){
return ‘I\‘m ‘ + this.get(‘name‘) + ‘, i live in ‘ + this.get(‘address‘),street;
}
});
var person = new Person({
name: ‘Asan‘,
address: {
street: ‘Mongo Street‘
}
});
console.log(person.aboutMe());
console.log(person.get(‘name‘));
在model中定义了一个aboutMe方法，在里面通过this.get方法可以获取到model属性的值，并返回。Person的实例可以调用aboutMe方法，输出model属性的值。
4.设置model默认属性
var Person = Backbone.Model.extend({
defaults: { //设置默认属性
name: ‘Kagol Antony‘,
address: {
street: ‘1st Street‘,
city: ‘Shenzhen‘,
State: ‘TX‘,
zipCode: 78701
}
},
initialize: function(){//初始化，首先执行
console.log(‘hello world!‘)
},
aboutMe: function(){
return ‘I\‘m ‘ + this.get(‘name‘) + ‘, i live in ‘ + this.get(‘address‘).street;
}
});
var person = new Person({
name: ‘Asan‘
});
console.log(person.get(‘name‘));//Asan
console.log(person.get(‘address‘).city);//Shenzhen
可以通过设置model的defaults属性为model设置默认属性。
5.使用model属性
var Person = Backbone.Model.extend({
defaults: {
name: ‘Kagol Antony‘,
hobby: ‘basketball‘
},
initialize: function(){
console.log(‘hello world!‘)
},
like: function(hobbyName){
this.set({
hobby: hobbyName
});
}
});
var person = new Person;
person.like(‘coding‘);
console.log(person.get(‘hobby‘));
在model中定义了一个like方法，接受一个参数，为爱好的名称(hobbyName)，用于设置hobby属性。
6.监听model属性的变化
var Person = Backbone.Model.extend({
defaults: {
name: ‘Elizabeth‘,
age: 18
},
initialize: function(){
console.log(‘hello world‘);
this.on(‘change:name‘, function(model){
var name = model.get(‘name‘);
console.log(‘Changed my name for ‘ + name);
})
}
});
var person = new Person ({
name: ‘Jack‘,
age: 20
}); //实例化的时候改变name属性不会触发change事件
person.set({name: ‘Kagol‘});//触发change事件，输出：‘Changed my name for Kagol‘
console.log(person.hasChanged());//true
console.log(person.changedAttributes());// Object {name: "Kagol"}
在初始化时通过this.on方法绑定change事件，可以监听model中某个属性的变化，例子中是监听name属性，只要name属性一改变就在控制台输出改变后的name。
7.数据验证
var Person = Backbone.Model.extend({
validate: function(attributes){
if(attributes.age < 0){
return ‘You can\‘t be negative years old‘;
}
},
initialize: function(){
console.log(‘hello, world!‘);
this.on(‘invalid‘, function(model, error){
console.log(error);
})
}
});
var person = new Person;
person.set({name: ‘Mary Poppins‘, age: -21}, {validate: true});// 会验证，输出"You can‘t be negative years old"
person.set({name: ‘Mary Poppins‘, age: 20}, {validate: true});//不会验证
person.set({name: ‘Mary Poppins‘, age: -21}, {validate: false});//不会验证
person.set({name: ‘Mary Poppins‘, age: -21});//不会验证
在model的validate方法中可以定义验证的逻辑，它接受一个参数attributes，代表model的属性，这里是验证了model的age属性，当其小雨0时，返回一段提示文字。在初始化时要通过this.on绑定invalid方法。在通过set方法设置model属性的时候，必须带上第二个参数{validate: true}，才会验证。
(三)视图(View)
1.加载模板
<script type="text/template" id="search_template">
<label>My Search: </label>
<input type="text" id="search_input">
<input type="button" id="search_button" value="Search">
</script>
<div id="search_contailer"></div>
var SearchView = Backbone.View.extend({
initialize: function(){
this.render();
},
render: function(){
var template = _.template($(‘#search_template‘).html(), {});
this.$el.html(template);
}
});
var search_view = new SearchView({
el: $(‘#search_contailer‘)
});
这里需要用到Underscore.js的模板库_.template，模板可以写在View的外面，通过type为"text/template"的script标签包裹，还要定义一个容器(这里是一个div)用于容纳模板的内容。
定义一个视图(View)和定义一个model非常类似，它也有一个initialize方法，用于初始化，render方法(在初始化时被调用)用于渲染模板。
2.添加监听事件
var SearchView = Backbone.View.extend({
initialize: function(){
this.render();
},
render: function(){
var template = _.template($(‘#search_template‘).html(), {});
this.$el.html(template);
},
events: {//添加事件
‘click #search_button‘: ‘doSearch‘
},
doSearch: function(){
console.log(‘Search for ‘ + $(‘#search_input‘).val());
}
});
var search_view = new SearchView({
el: $(‘#search_contailer‘)
});
添加监听事件只要在view的events属性中配置就可以了，可以配置多个事件。
3.向模板中传递参数
<script type="text/template" id="search_template">
<label><%= search_label %></label>
<input type="text" id="search_input">
<input type="button" id="search_button" value="Search">
</script>
<div id="search_contailer"></div>
var SearchView = Backbone.View.extend({
el: $(‘#search_contailer‘),//可以将el直接写在这里
initialize: function(){
this.render();
},
render: function(){
var variables = {//使用模版变量
search_label: ‘Kagol Search: ‘ // 可以传递多个参数
};
var template = _.template($(‘#search_template‘).html());
this.$el.html(template(variables));
},
events: {//添加事件
‘click #search_button‘: ‘doSearch‘
},
doSearch: function(){
console.log(‘Search for ‘ + $(‘#search_input‘).val());
}
});
var search_view = new SearchView;
要在模板中传递参数，只需要在把一个对象传递给_.template()()即可。
(四)集合(Collection)
<script type="text/template" id="artist_template">
<% _.each(artists, function(artist){ %>
<tr>
<td><%= artist.get(‘name‘) %></td>
<td><%= artist.get(‘hometown‘) %></td>
</tr>
<% }); %>
</script>
<table id="table"></table>
var Artist = Backbone.Model.extend({
defaults: {
name: ‘Jack‘,
hometown: ‘American‘
},
initialize: function(){}
});
var Artists = Backbone.Collection.extend({
model: Artist
});
var artist1 = new Artist;
var artist2 = new Artist({
name: ‘Kagol‘,
hometown: ‘China‘
});
var artist3 = new Artist({
name: ‘Elizabeth‘,
hometown: ‘England‘
});
var artists = new Artists([artist1, artist2, artist3]);
var ArtistView = Backbone.View.extend({
el: $(‘#table‘),
template: _.template($(‘#artist_template‘).html()),
initialize: function(){
this.render();
},
render: function(){
this.$el.html(this.template({
artists: artists.models
}));
}
});
var artistView = new ArtistView;
这个例子中，先创建了一个model，叫Artist，然后定义了一个Artist的Collection，名为Artists。接着定义了三个Artist的实例和一个Artists的实例，并用那三个Artist的实例初始化artists。接着定义了一个View，在render方法中定义了一个参数叫artists，它是一个数组，也就是那个Artist的实例。
值得注意的是模板中使用了Underscore.js的_.each，用于循环遍历，第一个参数就是参数artists，第二个参数是回调函数。
(五)总结
Backbone最适合的应用场景是单页面应用(SPA)，并且页面上有大量数据模型，模型之间需要进行复杂的信息沟通。Backbone在这种场景下，能很好地实现模块间松耦合和事件驱动。Backbone不像Angular一样帮你做好了很多事，你只能在它限定的规则下写代码，而是可定制性很高，使用Backbone提供的工具，你可以做任何你想做的事。
以上是关于Backbone入门的主要内容，如果未能解决你的问题，请参考以下文章