201507271255_《Backbone之二——使用Backbone八条建议 》

 
1. 数据不要存在试图view中或dom中,存储在model中。
新建model:
this.viewState = new Backbone.Model();


2. 关于backbone中Mvc中的c。backbone中的mvc中的c是指:collection——提供一些丰富的API用于枚举功能,用于枚举型。

3. Dom事件只改变model

4. Dom只有在model发生改变时才改变
this.listenTo(this.stateModel, 'change', this.render);
更好方法,只有在须要的时候才改变:
this.listenTo(this.stateModel, 'change:readMore', this.renderReadMore);
5. 绑定的东西必须解绑
   当视图从DOM上移除时,使用'remove'方法,它必须从全部绑定的事件上解绑上。
  若是你使用'on'绑定,你的职责是使用'off'去解绑。若是没有解绑,内存回收器没法释放内存,从而形成你应用的性能降低。
  这就是'listenTo'的由来。它会跟踪视图的绑定和解绑。Backbone把这个从DOM移动以前,会进行'stopListening'。
// Ok:
this.stateModel.on('change:readMore', this.renderReadMore, this);
 
// 神奇:
this.listenTo(this.stateModel, 'change:readMore', this.renderReadMore);

6.保持链式写法
例如:view.render().$el.appendTo(otherElement);

7. 事件比回调要好
Backbone模型(models)默认会触发'sync'和'error'事件,所以可使用这些事件代替回调。考虑一下这两种状况。
例如:
model.fetch({
  success: handleSuccess,
  error: handleError
});
//这种更好:
view.listenTo(model, 'sync', handleSuccess);
view.listenTo(model, 'error', handleError);
model.fetch();

8. view是有做用域的
    若是你须要更新一个别的不一样的视图,只要触发一个事件,让别的视图去作。你也可使用Backbone的全局Pub/Sub系统。
  例如,咱们阻止页面滚动:
var BodyView = Backbone.View.extend({
  initialize: function() {
    this.listenTo(Backbone, 'prevent-scroll', this.preventScroll);
  },
 
  preventScroll: function(prevent) {
    // .prevent-scroll 有下面的CSS规则: overflow: hidden;
    this.$el.toggleClass('prevent-scroll', prevent);
  }
});
 
// 如今从任何其余地方调用:
Backbone.trigger('prevent-scroll', true);   // 阻止 scrolling
Backbone.trigger('prevent-scroll', false);  // 容许 scrolling
相关文章
相关标签/搜索