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