创建一个接受可变数量的视图(以及区域)的布局 [英] Creating a layout that accepts a variable number of views (and hence regions)

问题描述

我的目标我需要创建一个自定义布局(流布局)，它可以接收可变数量的视图，并基于它们，根据需要创建区域，并在这些区域内显示传入的视图.视图可以垂直排列或水平.

My goal I 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.

要求布局有一个模板，其中最初未定义区域.它只包含一个包装器 (data-role="region-wrapper")，其中将呈现添加的区域.

Requirement The 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 - 像下面这样覆盖构造函数

2 - Ovveride the construtor like the following

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

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

    this._defineRegions(); // see 3
}            

3 - 动态定义区域

_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.

子视图都是相同的模式，有data-region='flow-region-"，甚至还有index.这是一个明显的集合模式以及它的观点.

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，而不是在此处覆盖 Region.

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.

因为 Marionette CollectionView 在 constructor 中有这样的监听器:

Because Marionette CollectionView has such listener in constructor:

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

在运行时添加区域.

Add region in runtime.

虽然我以前没有这样做过，但这是完全合法的.布局有原型方法addRegion(name, definition)，所以布局的任何实例都应该能够在运行时添加/删除区域/区域.用法如下:

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

这篇关于创建一个接受可变数量的视图(以及区域)的布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！