创建接受可变数量的次（并且因此区域）的布局

问题描述

我的目标
我需要创建一个自定义布局（流布局），可以接收各种观点的不同数量和基于这些，它创建的区域是必要和这些区域内它表明，在通过了意见。意见可垂直排列或水平。

My goalI need to create a custom layout (a flow layout) that can receive a variable numbers of views and based on them, it creates regions as necessary and within those regions it shows the views that are passed in. The views can be arranged vertically or horizontally.

要求
布局具有其中最初没有定义的区域的模板。它只包含一个包装（数据角色=区域包装）其中添加的区域将被渲染。

RequirementThe layout has a template where initially regions are not defined. It only contains a wrapper (data-role="region-wrapper") where added regions will be rendered.

我的做法。

1 - 延长 Marionette.Layout （显然）

1 - Extend a Marionette.Layout (obviously)

2 - Ovveride的construtor像下面的

2 - Ovveride the construtor like the following

constructor: function(options) {
    // call super here...

    this.viewList= options.viewList || [];

    this._defineRegions(); // see 3
}            

3 - 定义区域动态

3 - Define the regions dynamically

_defineRegions: function() {

    _.each(this.viewList, function(view, index) {               
    var name = 'flowRegion_' + index;
    var definition = { selector: "[data-region='flow-region-" + index + "']" };             
    this.addRegion(name, definition);

    }, this);
},

4 - 渲染相同的布局内的OnRender方法地区和意见

4 - Render regions and views in onRender method within the same layout

onRender: function() {

    _.each(this.viewList, function(view, index) {   
        // if the view has not been instantiated, instantiate it

        // a region is a simple div element
        var $regionEl = // creating a region element here based on the index

        // append the region here
        this.$el.find("[data-role='flow-wrapper']").append($regionEl); 

        var region = this.getRegion(index); // grab the correct region from this.regionManager
        region.show(view);              
    }, this);
}

该解决方案似乎工作，但我想知道如果我下面的一个有效与否。任何其他办法可循？

This solution seems working but I would like to know if I'm following a valid one or not. Any other approach to follow?

推荐答案

也许我不能完全跟着，但我看不出有任何理由的CollectionView不能在这种情况下使用。

Maybe I'm not fully followed, but I can't see any reason a collectionView can't be used in this case.

孩子的意见都在相同的模式，有数据区='流区域 - ，甚至有首页，这是收集和其视图的一个明显的模式。

The child views are all in same pattern, having data-region='flow-region-", and even have index. This is an obvious pattern of collection and its view.

使用的CollectionView你可以做类似的事情，添加/删除子视图，完全复位，关闭等。

With collectionView you can do things similar, adding/removing child views, fully reset, close etc.

如果这是我肯定会推荐在这里使用的CollectionView或CompositeView中，而不是压倒一切的地区的情况。

If this is the case I would definitely recommend to use CollectionView or CompositeView, instead of overriding Region here.

更新

1. 为什么去掉模型会导致删除视图。

1. About why removing a model will cause removing view.

由于牵线木偶的CollectionView在构造这样的监听器：

Because Marionette CollectionView has such listener in constructor:

this.listenTo(this.collection, "remove", this.removeItemView, this);

在运行时添加的区域。

Add region in runtime.

这是完全合法的，虽然我还没有做之前。布局原型法 addRegion（名称，定义），所以布局的任何实例应该能够在运行时添加/删除区域/地区。用法是这样的：

It's totally legit though I have not done that before. Layout has prototype method addRegion(name, definition), so any instance of layout should be able to add/remove region/regions in runtime. The usage would be like this:

foo_layout.addRegion({region1: '#region-1'});

这篇关于创建接受可变数量的次（并且因此区域）的布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！