Marionette.js渲染多個ItemViews與不同的模型+模板在CollectionView

我想圍繞如何呈現多個ItemViews，每個具有不同的模型和模板，在一個CollectionView中。 Marionette.js文檔指定CollectionView支持單個ItemView。我做錯了這個假設還是可以讓CollectionView支持這個？如果不是，建議什麼？預先感謝您的幫助。Marionette.js渲染多個ItemViews與不同的模型+模板在CollectionView

UPDATE：

添加以下代碼：

privObj.propertiesSubPanelView = new Marionette.CollectionView({ 
        el: options.el, 
        collection: col, 
        getItemView: function(item) { 
         console.log(item); 
        } 
       }); 
privObj.propertiesSubPanelView.render.done(function() { 
    console.log('Im done'); 
});

即給予以下錯誤：

An `itemView` must be specified

更新＃2：

我已經實現了getItemView在CollectionView中的功能如下：

var ColView = Marionette.CollectionView.extend({ 
    collection: col, 
    itemViews: views, 

    getItemView: function(item) { 
     var viewId, 
     itemViewObj, 
     itemView; 

     viewId = item.get('name'); 
     itemViewObj = Marionette.getOption(this, 'itemViews'); 
     itemView = itemViewObj[viewId]; 

     if (_.isUndefined(itemView)) { 
      throw new Error('No view associated with name: ' + viewId); 
     } 
     return itemView; 
    } 
}); 

var colView = new ColView(); 

var propLayout = new PropLayout(); 
propLayout.properties.show(colView);

不過，我不會收到以下錯誤：（遺漏的類型錯誤的對象不是一個函數）：

Marionette.CollectionView.buildItemView: function(item, ItemViewType, itemViewOptions){ 
    var options = _.extend({model: item}, itemViewOptions); 
    return new ItemViewType(options); <<== this line! 
}

我錯過了什麼或者這是一個錯誤？

更新＃3

這是我的主要功能...

  newPropertiesSubPanelCollection: function(col, views) { 
       var labelModel1 = new Backbone.Model({ 
        name: 'Properties', 
        value: 'Properties', 
        data: undefined 
       }); 
       var labelView1 = new Label_.Item(); 

       var labelModel2 = new Backbone.Model({ 
        name: 'Configure', 
        value: 'Properties', 
        data: undefined 
       }); 
       var labelView2 = new Label_.Item(); 

       var col = new Backbone.Collection(); 
       col.add(labelModel1); 
       col.add(labelModel2); 

       var views = {}; 
       views['Properties'] = labelView1; 
       views['Configure'] = labelView2; 

       var ColView = Marionette.CollectionView.extend({ 
        collection: col, 
        itemViews: views, 

        getItemView: function(item) { 
         var viewId, 
          itemViewObj, 
          itemView; 

         viewId = item.get('name'); 
         itemViewObj = Marionette.getOption(this, 'itemViews'); 
         itemView = itemViewObj[viewId]; 

         if (_.isUndefined(itemView)) { 
          throw new Error('No view associated with name: ' + viewId); 
         } 
         return itemView; 
        } 
       }); 
       var colView = new ColView(); 
       return this.propertiesSubPanelCollection = colView; 
      },

來源

2014-04-19 Chris

我的答案用的jsfiddle說明概念更新。 –

查看源https://github.com/marionettejs/backbone.marionette/blob/master/src/marionette.collectionview.js我們可以看到：

getItemView: function(item){ 
    var itemView = Marionette.getOption(this, "itemView"); 

    if (!itemView){ 
     throwError("An `itemView` must be specified", "NoItemViewError"); 
    } 
    return itemView; 
},

這意味着它會默認查找itemView屬性。但是，如果您覆蓋此功能（如David Sulc所說），則可以在此處執行任何操作。如果你願意，你可以提供一個對象有意見，例如：

privObj.propertiesSubPanelView = Marionette.CollectionView.extend({ 
    el: options.el, 
    itemViews: { 
     view1: itemView1, 
     view2: itemView2 // etc.. 
    } 
    getItemView: function(item) { 
     // Get the view key for this item 
     var viewId = item.get('viewId'); 

     // Get all defined views for this CompositeView 
     var itemViewObject = Marionette.getOption(this, "itemViews"); 

     // Get correct view using given key 
     var itemView = itemViewObject[viewId]; 


     if (!itemView){ 
      throwError("An `itemView` must be specified", "NoItemViewError"); 
     } 
     return itemView; 
    } 
}); 

// Create view instance 
var viewInstance = new privObj.propertiesSubPanelView({ 
    collection: col 
}); 

// Your model might have the following attribute 
model.get('viewId'); // returns 'view1';

也有你的問題，這是new Marionette.CollectionView({另一個錯誤。你不能那樣做，看上面的例子。您需要首先擴展視圖，然後調用關鍵字new。

增加了一個展示的jsfiddle上面的代碼：http://jsfiddle.net/Cardiff/L8xG9/

來源

2014-04-22 10:59:15

我更新了答案，因爲您的示例代碼中存在另一個錯誤。它在使用之前與擴展視圖有關，請參閱上面的答案。 –

謝謝威爾伯特。但是，此實現會生成UPDATE＃2中列出的錯誤。這是我的bug還是存在於Marionette.js中？ – Chris

什麼是你的'views'變量完全傳遞？看看這個木偶文檔，它試圖實例化從getItemView函數返回的對象。如果你在這裏沒有提供正確的視圖，它會拋出錯誤。 –