我试图围绕如何在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;
            },

===============>>#1 票数: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/

===============>>#2 票数:0

您可以根据模型定义getItemView以返回不同的项目视图: https : //github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.collectionview.md#collectionviews-getitemview

===============>>#3 票数:0

这是一些旧的骨干网和木偶库的问题。 我使用了以下库,它解决了该问题。

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

  ask by Chris translate from so

未解决问题?本站智能推荐:

1回复

Marionette.js集合在集合视图中未定义

我对Marionette.js相当陌生,似乎在渲染“收藏夹视图”时遇到了一些麻烦。 尝试显示视图时,我收到以下控制台错误消息: Uncaught TypeError: Cannot read property 'toJSON' of undefined 。 似乎该集合未绑定到子视图。
1回复

定义el时将重置Backbone.Marionette collectionview

我对木偶collectionView有问题。 当我不定义像 集合视图: collectionview呈现封装在div标签内的项目,这是有问题的。 当我像这样定义容器元素时: 该视图将itemViews呈现为 这是所需要的,但是当整个集合都呈现时,元素消失了
1回复

渲染木偶CollectionView时如何删除每个childView之间的换行符?

在MarionetteJS中,创建CollectionView时,所有子项在呈现时都会自动由换行符分隔。 我希望必须在不添加换行符的情况下按顺序渲染特定CollectionView中的子级(有效地将换行符替换为空格)。 我仔细阅读了源代码,并确定需要更改从CollectionView的r
1回复

正确使用Backbone.js和Marionette对集合进行分组

我不太确定如何使用Backbone.js和Marionette来组织我的收藏夹和视图。 因此,我所拥有的是一个相当简单的时间集合(开始,结束,输入)。 我想将此集合显示为表格,并在每4个条目之后重复表格的布局。 到目前为止,我创建的是带有ItemView的CompositeView,
2回复

Marionette CollectionView带有一个独特的ItemView

有什么方法可以在Marionette CollectionView中创建单个唯一视图? 我的意思是这样的: 的CollectionView StartView(这是独特的视图) 常规ItemView 常规ItemView 常规ItemView 等
1回复

Backbone.Marionette CollectionView模板'undefined'

我一直在使用Brian Mann的BackboneRails截屏视频,所以我的应用程序结构完全符合这些。 以下定义了HomepageApp Marionette Appication的“show”部分。 我也用以下内容覆盖Marionette.Renderer.render函数:
3回复

Backbone / Marionette ItemView策略

我正在建立一个网站,其博客有一些特点。 这是一种tumblr-esque体验,其中有不同的后期类型: Facebook的员额 引用 文章 研究 这些帖子共享一些常见属性,如id , title , post_date , post_url_slug ,
3回复

带有requireJS的Marionette CollectionView:undefined不是一个函数

我将用一个例子来解释我的问题。 我可以使这段代码没有任何问题(使用MarionetteJS v1.6.2): http://codepen.io/jackocnr/pen/tvqHa 但是当我尝试将它与requireJs一起使用并将其放在Marionette Controller的
4回复

Marionette.js CollectionView,只渲染特定的模型

我正在重构我的Backbone.js应用程序以使用Marionette.js,我试图将我的头部包裹在CollectionView 。 假设我有几个带有模型Cow ItemView : 现在这就是诀窍。 我只想要在我的牧场上有斑点的奶牛。 在定义我的CollectionView(
1回复

Bacbone Marionette如何访问包含视图的元素?

我有具有tagName和Id / tagClass的CollectionView。 我注意onRender事件上将插件应用于'tagName'元素。 我无法通过this.el访问它。