将区域动态添加到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添加到布局中，直接在其内部渲染视图实例。

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

我知道前面的问题："向布局动态添加/删除区域"但看不到任何明确的答案。

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 相关