將集合拆分爲多個視圖（主幹/牽線木偶）

首次處理項目並使用Backbone/Marionette。將集合拆分爲多個視圖（主幹/牽線木偶）

我將一些數據從一個API拉到一個集合中，我想將這些項目分組並將它們顯示在一個選項卡式界面中，每個組進入其自己的選項卡。

以下是我的代碼的蒸餾版本。我還創建了一個jsfiddle。

var MyModel = Backbone.Model.extend({/* attributes: type, name */}); 

var MyCollection = Backbone.Collection.extend({model: MyModel}); 

var MyView = Marionette.ItemView.extend({ 
    tagName: 'li', 
    template: _.template("<%= name %>") 
}); 

var MyCollectionView = Marionette.LayoutView.extend({ 
    el: '#tabs-content', 
    template: _.template('<div id="A"></div><div id="B"></div><div id="C"></div>'), 
    regions: { 
     rA: '#A', 
     rB: '#B', 
     rC: '#C' 
    }, 

    initialize: function() { 
     var SubView = Marionette.CollectionView.extend({ 
      childView: MyView, 
      tagName: 'ul' 
     }); 
     this.viewA = new SubView({collection: new Backbone.Collection()}); 
     this.viewB = new SubView({collection: new Backbone.Collection()}); 
     this.viewC = new SubView({collection: new Backbone.Collection()}); 
    }, 

    onBeforeRender: function() { 
     var grouped = this.collection.groupBy('type'); 
     this.viewA.collection.reset(grouped.a); 
     this.viewB.collection.reset(grouped.b); 
     this.viewC.collection.reset(grouped.c); 
    }, 

    onRender: function() { 
     this.regionManager.get('rA').show(this.viewA); 
     this.regionManager.get('rB').show(this.viewB); 
     this.regionManager.get('rC').show(this.viewC); 
    } 
});

有一對夫婦的事情，關心我，我的解決方案：

在LayoutView對象手動創建子視圖看起來凌亂;有沒有更好的辦法？
集合被複制到子視圖，所以如果我有1000種型號，我現在已經在內存2000款

是否有更好的方法來管理呢？提前致謝。

來源

2014-10-29 jbarreiros

在視圖中創建子視圖和集合不是一個好習慣，請使用控制器。您可以使用下劃線_.groupBy(list, iteratee, [context])拆分數據，並在控制器中手動設置必要的集合。有關應用程序架構的好教程可以在http://www.backbonerails.com/series找到。

另一種方法，如果你沒有很多數據，你可以重寫attachHtml方法來指定childView容器。看看這個例子http://jsfiddle.net/7j3sfsvt/

來源

2014-10-29 10:47:55 knpsck

感謝@knpsck的迴應。好奇你的意思是「使用控制器」？你的意思是類似於一個戰略課？ - 感謝jsfiddle並指出attachHtml方法。還沒有讀過它呢。我已經可以想到其他地方使用它。 – jbarreiros 2014-10-29 17:53:23

將集合拆分爲多個視圖（主幹/牽線木偶）

回答

相關問題