注:教程请参见这里(本文有很多内容都是从这里翻译的),官方网站在这里;综合例子参见这里。
Backbone.js 是一个前端 MVC 框架,model 能够绑定键值对和自定义事件,集合具备可枚举方法的富 API,视图具备事件处理能力,并且可以通过 RESTful 的 JSON 接口和你已有的 API 通信。
View
Backbone 里的视图就是用来反映数据模型的,可以监听事件并响应,通过利用 Underscore.js(这个真是一个牛逼哄哄的东西,自己看),还支持了 JavaScript 模板技术,把数据和模板分离开。
“el” 属性就是浏览器创建的一个 DOM 对象的引用,是供 backbone 渲染的画布,每一个 view 都会有这样一个属性,如果不存在,backbone 就会自己定义一个空的 div 来作为 el,现在把”el” 属性定义到 div#search_container,看:
<div id="search_container"></div>
<script type="text/javascript">
SearchView = Backbone.View.extend({
initialize: function(){
this.render();
},
render: function(){
//Pass variables in using Underscore.js Template
var variables = { search_label: "My Search" };
// Compile the template using underscore
var template = _.template( $("#search_template").html(), variables );
// Load the compiled HTML into the Backbone "el"
this.el.html( template );
},
events: {
"click input[type=button]": "doSearch"
},
doSearch: function( event ){
// Button clicked, you can access the element that was clicked with event.currentTarget
alert( "Search for " + $("#search_input").val() );
}
});
var search_view = new SearchView({ el: $("#search_container") });
</script>
<script type="text/template" id="search_template">
<!-- Access template variables with <%= %> -->
<label><%= search_label %></label>
<input type="text" id="search_input" />
<input type="button" id="search_button" value="Search" />
</script>
上面的代码说明一下:
Model
Model 是 JavaScript 应用的核心,在这里它包括了包含大量逻辑的数据交互、转换、校验,属性的计算和访问控制:
Person = Backbone.Model.extend({
defaults: {
name: 'Fetus',
age: 0,
children: []
},
initialize: function(){
alert("Welcome to this world");
},
adopt: function( newChildsName ){
var children_array = this.get("children");
children_array.push( newChildsName );
this.set({ children: children_array });
}
});
var person = new Person({ name: "Thomas", age: 67, children: ['Ryan']});
person.adopt('John Resig');
var children = person.get("children"); // ['Ryan', 'John Resig']
简单说明一下:
再来看看事件绑定的写法(看下面的 bind 方法的调用)和属性校验的写法(validate 方法):
Person = Backbone.Model.extend({
// If you return a string from the validate function,
// Backbone will throw an error
validate: function( attributes ){
if( attributes.age < 0 && attributes.name != "Dr Manhatten" ){
return "You can't be negative years old";
}
},
initialize: function(){
alert("Welcome to this world");
this.bind("error", function(model, error){
// We have received an error, log it, alert it or forget it :)
alert( error );
});
}
});
Router
Router 以前是被 backbone 称为 Controller 的,它使用 URL 的 hash 来做地址映射。主要的写法有 “*” 和 “:” 两种:
var AppRouter = Backbone.Router.extend({
routes: {
"/posts/:id/:action": "getPost",
"*actions": "defaultRoute" // Backbone will try match the route above first
},
getPost: function( id, action ) {
// Note the variable in the route definition being passed in here
alert( "Get post number " + id );
},
defaultRoute: function( actions ){
alert( actions );
}
});
// Instantiate the router
var app_router = new AppRouter;
// Start Backbone history a neccesary step for bookmarkable URL's
Backbone.history.start();
稍微说明一下:
Collection
Collection 其实就是一组 Model 的有序集合。
var Song = Backbone.Model.extend({
defaults: {
name: "Not specified",
artist: "Not specified"
},
initialize: function(){
console.log("Music is the answer");
}
});
var Album = Backbone.Collection.extend({
model: Song
});
var song1 = new Song({ name: "How Bizarre", artist: "OMC" });
var song2 = new Song({ name: "Sexual Healing", artist: "Marvin Gaye" });
var song3 = new Song({ name: "Talk It Over In Bed", artist: "OMC" });
var myAlbum = new Album([ song1, song2, song3]);
console.log( myAlbum.models ); // [song1, song2, song3]
说明一下:
文章未经特殊标明皆为本人原创,未经许可不得用于任何商业用途,转载请保持完整性并注明来源链接 《四火的唠叨》
×Scan to share with WeChat