需要澄清在 Marionette 中动态添加区域答案

【问题标题】：Need clarifications on adding regions dynamically in Marionette需要澄清在 Marionette 中动态添加区域
【发布时间】：2013-05-01 02:16:36
【问题描述】：

我有一个需要显示指标的应用程序。应用程序需要为每个指标显示一个单独的垂直部分。当我开始这个时，只有 5 个指标，所以我天真地创建了一个包含 5 个区域的模板，一个用于我需要显示的每个指标。现在，需要添加新的指标，我想避免在模板中添加“硬编码”区域 div。我想重构它并根据一些配置数据在启动时动态创建所需的区域。

所以我一直在查看最新的 Marionette 版本，在问题“Dynamically add regions to Marionette layout”中，Derick Bailey 提到 Marionette v1.0 通过 addRegion() 支持布局中的动态区域，如下所示：

var layout = new MyLayout();
layout.render()
layout.addRegion("someRegion", "#some-element");
layout.someRegion.show(new MyView());

我已经在我的代码中尝试过（使用 Marionette 1.0.2），但我没有让它工作。我的模板中没有 id="some-element" 的 div，我怀疑这可能是原因。我希望 Marionette 自己创建那个 div。

也许我对动态添加区域意味着什么的期望是错误的。所以我的第一个问题是：在布局中动态添加区域时，addRegion()函数中传入的元素id是否必须已经存在于布局中？

如果是这样，那么我又回到了必须在模板中“烧录”这些 div 以使区域也附加自己的问题。我的后续问题是：以数据驱动的方式执行此操作的最佳方法是什么？是否需要编写我自己的 render() 函数以便创建正确的 div 集？或者也许为我的布局提供一个模型对象，该对象将包含模板然后可以迭代以创建必要的 div 的数据？如果我们事先不知道我们实际需要多少个区域，我们如何动态地向 Layout 对象添加区域？

【问题讨论】：

标签： marionette

【解决方案1】：

Aa @aaronfay 指定，我们需要使用 jQuery 在页面上创建元素。下面是一些示例代码：

var layout = new MyLayout();
layout.render()
var regionName = "dynamicRegion"; 
layout.$el.append('<div id="'+regionName+'"></div>');
layout.addRegion("someRegion", "#"+regionName);
layout.someRegion.show(new MyView());

【讨论】：

【解决方案2】：

我相信您需要使用 jQuery（或类似的）在页面上创建元素。 Region 期望元素存在。

否则，我相信你的答案是here。

【讨论】：