3

我正在使用 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 不支持 a regions: {profileRegion: '#feed-profile'}，我有什么选择？

提前致谢！

4

3 回答 3

4

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

Marionette 的文档——布局视图

于 2013-07-21T23:54:33.360 回答
3

如果由于某种原因您希望在 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) 有效。

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

于 2014-09-19T14:18:07.463 回答
0

除了 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();
    }
});

这样，您将能够与您的 CompositeView 实例进行交互，就像您与 LayoutView 实例一样：

var listView = new View.ListView({ ... });
var anotherView = new View.AnotherView({ ... });
listView.someRegion.show(anotherView);
于 2016-10-17T13:58:36.403 回答