Marionette.js在CollectionView中渲染具有不同模型和模板的多個ItemView

Question

我試圖圍繞如何在CollectionView中呈現多個ItemView（每個具有單獨的模型和模板）進行思考。 Marionette.js文檔指定CollectionView支持單個ItemView。 我做這個假設是錯誤的，還是CollectionView可以支持這個假設？ 如果沒有，推薦什么？ 預先感謝您的協助。

更新：

我添加了以下代碼：

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：

我已經在CollectionView中實現了getItemView函數，如下所示：

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 );

但是，在以下情況下，我沒有得到以下錯誤（未捕獲的TypeError：對象不是函數）：

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;
            },

Answer 1

查看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/

Answer 2

您可以根據模型定義getItemView以返回不同的項目視圖： https : //github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.collectionview.md#collectionviews-getitemview

Answer 3

這是一些舊的骨干網和木偶庫的問題。 我使用了以下庫，它解決了該問題。

https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.2/backbone-min.js https://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/2.4.5/backbone .marionette.min.js