动态添加区域到Marionette布局

Question

我有一个布局，但不能提前定义它的所有区域，因为它们是未知的。

所以稍后会创建一个ItemView，我想在布局中使用视图的ID作为区域名称创建一个新区域，这样我就可以说：

layout.dynamicRegionName.show(newItemView);

但这里有循环依赖。

1. 我还没有呈现视图，所以我无法引用它的DOM元素，以便在布局调用.addRegion（）时使用
2. 我无法渲染它，正是因为我希望它通过调用它的.show（）通过动态添加的区域附加到DOM树。

@DerickBailey在github的Marionette.Layout文档中我相信这个例子中有一个错误：layout.show(new MenuView());

但从技术上讲，这接近我们在这里所需要的，即能够做到：

layout.addRegion(VAR_WITH_NEW_REGION_NAME, aViewInstance);

并将其添加到布局渲染中的新Region直接在视图实例中。

我错过了其他一些明显的方法来实现这一目标吗？这是一个已知的缺失功能吗？有没有理由不拥有它？

我知道这个先前的问题：“Dynamically add/remove regions to a layout”，但没有看到任何明确/明确的答案。

Answer 1

Marionette v1.0（v1.0.2是最新的，现在）支持Layouts中的动态区域。

var MyLayout = Marionette.Layout.extend({
  template: "#some-template"
});

var layout = new MyLayout();
layout.render();

layout.addRegion("someRegion", "#some-element");

layout.someRegion.show(new MyView());

Answer 2

在我的一个项目中，我遇到了类似的问题。我需要动态创建一个表单，即表单将包含在运行时之前无法确定的不同字段视图。我需要将这些字段视为木偶视图，因为它们具有相当复杂的行为。

我在CoffeeScript的Marionette 1.4中完成它的方式：

  class Module.AdditionalOptionsLayout extends Marionette.Layout
    tagName: 'form'

    initialize: (options = {}) ->
      @_fieldViews = options.fieldViews || []

    onRender: ->
      @_showFields @_fieldViews

    _showFields: (fieldViews) ->
      fieldViews.forEach (fieldView) => @_addRegion().show fieldView

    _addRegion: ->
      regionClass = _.uniqueId('field-region__')
      @$el.append $("<div class=\"#{regionClass}\"></div>")
      @addRegion regionClass, '.' + regionClass

请告诉我是否需要进一步解释，或者我可以在JS中澄清一下。我也知道这是一个迟到的答案，但希望有人能发现它仍然有用。另外，请注意 - 答案仅适用于Marionette 1.x