在Backbone.js中處理子視圖

Question

我有一個基本的Backbone應用程序，它從遠程服務獲取JSON對象數組並顯示它們：迄今爲止都是很好的。但是，每個JSON對象都有一個標籤數組，我想在網頁的單獨區域中顯示標籤。

我的問題是：做這件事最友好的方式是什麼？我可以在第二個視圖中再次解析現有數據，該視圖更清晰，但需要更多計算（處理整個數組兩次）。

另一種方法是在主視圖中收集標記信息，因爲它正在處理數組，然後將它傳遞給子視圖，但隨後將視圖鏈接在一起。

最後，我想根據這些標籤進行過濾（因此標籤會變成切換按鈕，打開/關閉這些按鈕將過濾主視圖中的信息）;這對於如何佈置這有什麼不同？

代碼片段的加分。

Answer 1

嗯。我不確定這是否是對骨幹友好的方式，但是我會把這個邏輯放在集合中檢索一個標籤列表（我認爲這就是你的意思是「解析」）。

主視圖和子視圖都將「偵聽」相同的集合，子視圖只會調用collection.getTags（）來獲取它需要的標記列表。

// Model that represents the list data 
var ListDataModel = Backbone.Model.extend({ 
    defaults: function() { 
     return { 
      name: null, 
      tags: [] 
     }; 
    } 
}); 

// Collection of list data 
var ListDataCollection = Backbone.Collection.extend({ 
    model: ListDataModel, 
    initialize: function() { 
     var me = this; 

     // Expires tag collection on reset/change 
     this.on('reset', this.expireTagCache, this); 
     this.on('change', this.expireTagCache, this); 
    }, 
    /** 
    * Expires tag cache 
    * @private 
    */ 
    expireTagCache: function() { 
     this._cachedTags = null; 
    }, 
    /** 
    * Retrieves an array of tags in collection 
    * 
    * @return {Array} 
    */ 
    getTags: function() { 
     if (this._cachedTags === null) { 
      this._cachedTags = _.union.apply(this, this.pluck('tags')); 
     } 

     return this._cachedTags; 
    }, 

    sync: function(method, model, options) { 
     if (method === 'read') { 
      var me = this; 

      // Make an XHR request to get data for this demo 
      Backbone.ajax({ 
       url: '/echo/json/', 
       method: 'POST', 
       data: { 
        // Feed mock data into JSFiddle's mock XHR response 
        json: JSON.stringify([ 
         { id: 1, name: 'one', tags: [ 'number', 'first', 'odd' ] }, 
         { id: 2, name: 'two', tags: [ 'number', 'even' ] }, 
         { id: 3, name: 'a', tags: [ 'alphabet', 'first' ] } 
        ]), 
       }, 
       success: function(resp) { 
        options.success(me, resp, options); 
       }, 
       error: function() { 
        if (options.error) { 
         options.error(); 
        } 
       } 
      }); 
     } 
     else { 
      // Call the default sync method for other sync method 
      Backbone.Collection.prototype.sync.apply(this, arguments); 
     } 
    } 
}); 

var listColl = new ListDataCollection(); 
listColl.fetch({ 
    success: function() { 
     console.log(listColl.getTags()); 
    } 
}); 

我想兩個原因收集在處理這樣的：

• 它使視圖代碼清潔（這是因爲我們沒有在標籤提取做的非常複雜的邏輯 - 它只是一個簡單_.pluck（）和_.union（）
• 它0業務邏輯參與 - 它可以說是屬於數據層

爲了解決性能問題：。

• 它確實經歷了兩次收集 - 但是，如果即使在這種情況下，您正在使用的數據太多，客戶端也無法處理，您可能需要考慮要求後端提供API端點爲了這。 （即使有500個數據總共有1000個標籤，對於現代的瀏覽器來說也不應該太多。）

嗯。這有幫助嗎？

JSF與這個集合和模型一起去：http://jsfiddle.net/dashk/G8LaB/（和一個日誌語句來演示.getTags()的結果）。