[聚合文章] backbone 要点知识整理

1.backbone 是个mvc的库，官方文档说它是个库，而不是个框架。库和框架的区别就是，库只是个工具，方便你的项目应用，不会改变你的项目结构，而框架会有一套自己的机制，项目需要遵循框架的设计来实现，你要适应框架。backbone 可以当作库或者框架来用都可以。当作库，你可以只使用它的部分特性，如事件；当作框架的话，可以使用它的完整的mvc，router，history。

2.backbone的优点：a.实现了mvc结构，虽然controller里面只有router。b.可以通过事件监听，自动刷新view
backbone的缺点：a.所有的业务逻辑都在view里，view太重；b.锚点路由不利于seo
3.backbone的model，通过Backbone.sync来代理和服务器交互。也可以重写方法，把数据放到其它地方。
4.collection 也使用Backbone.sync 将一个集合状态持久化到服务器。
重写Backbone.sync 来完成自定义处理；参考ackbone.localStorage.js

Backbone.sync=function(method,model){
alert(""+method+":"+model.url);
}
var list=new Backbone.Collection();
list.url="/search";
list.fetch();

collection的fetch方法 例子

可以监听集合chang事件，集合中模型发生变化都会出发change事件
5.model和collection 都集成了undercore的部分方法，方便操作

6.事件：
a.如果你的一个页面含有大量的不同事件，我们约定使用冒号来为事件添加 命名空间 俗成地使用冒号来命名："poll:start", 或 "change:selection"

//sample1
var obj={};
_.extend(obj,Backbone.Events);
obj.on("myEvt:first",function(e){
alert("hi,and data is "+e.data);
});
obj.on("myEvt:second",function(e){
alert("hi,and data is "+e.data);
});
obj.trigger("myEvt:first",{data:"first"});
obj.trigger("myEvt:second",{data:"second"});

事件命名空间例子

//sample2
var obj={};
_.extend(obj,Backbone.Events);
obj.on("all",function(e,data){
console.log("hi,and data is "+data);
});
obj.trigger("myEvt:first","first");
obj.trigger("myEvt:second","second");
obj.trigger("test","test");

绑定all事件

b.让 object 监听 另一个（other）对象上的一个特定事件。object.listenTo(other, event, callback)
而使用这种形式的优点是：listenTo允许 object来跟踪这个特定事件，并且以后可以一次性全部移除它们。
callback 在object上下文中执行
view.listenTo(model, 'change', view.render);

结束监听事件
view.stopListening(model);

c.change:[attribute]" (model, value, options) — 当一个model（模型）的某个特定属性被更新时触发

"change:[命名空间]" 和 change:[attribute] 的区别：
"change:[命名空间]" 只是"事件:[命名空间]"的一个特例，既可以是change事件，也可以是其它事件，包括自定义事件。需要手动触发。
change:[attribute] 它会关联model的属性，当一个model（模型）的某个特定属性被更新时触发

//change:[attribute] sample:
var model=new Backbone.Model({title:'天猫',name:'商城'});
model.on('change:title',function(e){
// console.log('title changed',JSON.stringify(e));
alert('title changed:'+JSON.stringify(e));
})    
model.set({title:'京东'});

//change:[命名空间] sample:
var obj={};
_.extend(obj,Backbone.Events);
obj.on("myEvt:first",function(e){
alert("hi,and data is "+e.data);
});
obj.on("myEvt:second",function(e){
alert("hi,and data is "+e.data);
});
obj.trigger("myEvt:first",{data:"first"});
obj.trigger("myEvt:second",{data:"second"});

注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。