Question

我正在使用CompositeView创建一个图像网格，它们上面有一些事件。这就是它的样子：

Backbone.Marionette.CompositeView.extend({

    events: {
        'click li.feed-thumb': 'clickElement',
    },

    template: _.template(template),

    itemView: ItemFeedView,
    itemViewContainer: "#feed ul.feed",

    clickElement: function(event) { 
        var profile = new ProfileFeedView();

    }
});

此CompositeView的模板包含一个<li>元素，当我点击图像时，该元素将呈现配置文件。对于点击图片的所有事件，我使用相同的<li>。我想把它作为一个区域处理，因为我知道像Marionette区域这样做会处理视图的打开和关闭。

我认为CompositeView不支持regions: {profileRegion: '#feed-profile'}，我的选择是什么？

提前致谢！

Answer 1

您应该使用布局视图，您可以在其中指定任意数量的区域，因此您可以创建一个列表区域，您可以在其中放置复合视图和一个配置文件区域，您可以在其中放置项目视图渲染配置文件。

Marionette's docs -- Layout View

Answer 2

如果由于某种原因你想在CompositeView中有区域，你也可以这样做：

var YourView = Backbone.Marionette.CompositeView.extend({
    regions: {
       "someRegion": ".someRegionClass"
    },
    "initialize": function(options) {
       this._initializeRegions(options);
    },
    "onDestroy": function() {
       this.regionManager.destroy();
    }
})
_.each(["_initializeRegions", "_initRegionManager",
        "_buildRegions", "addRegion", "addRegions",
        "removeRegion", "getRegion", "getRegions",
        "_reInitializeRegions", "getRegionManager"], function(prop) {
    PaginatorView.prototype[prop] = Marionette.LayoutView.prototype[prop];
});

说实话，它有效，但我没有测试它的全部功能。

view.someRegion.show（otherView）有效。

（也适用于我想的其他视图，你必须添加扩展视图所需的其他选项）

Answer 3

除了Manfred所说的我在Marionette Composite View上以这种方式实现它：

View.ListView = Marionette.CompositeView.extend({
    template: listTpl,
    emptyView: noItemsTpl,
    childView: View.ListItem,
    childViewContainer: '#items-list',

    regions: {
       "someRegion": "#someRegion"
    },

    initialize: function(options) {
        //give this composite view a LayoutView behaviour with added region manager
        this.regionManager = new Marionette.RegionManager();
        _.each(["_initializeRegions", "_initRegionManager",
                "_buildRegions", "addRegion", "addRegions",
                "removeRegion", "getRegion", "getRegions",
                "_reInitializeRegions", "getRegionManager"], function(prop) {
            Marionette.CompositeView.prototype[prop] = Marionette.LayoutView.prototype[prop];
        });
        var that = this;
        _.each(this.regions, function(value, key) {
            var region = that.addRegion(key, value);
            that[key] = region;
        });
    },

    onDestroy: function() {
       this.regionManager.destroy();
    }
});

通过这种方式，您可以与使用LayoutView实例完全相同的方式与CompositeView实例进行交互：

var listView = new View.ListView({ ... });
var anotherView = new View.AnotherView({ ... });
listView.someRegion.show(anotherView);

使用CompositeView中的区域进行子视图

3 个答案: