Question

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

所以我一直在关注最新的Marionette发布和问题“Dynamically add regions to Marionette layout”，Derick Bailey提到Marionette v1.0通过addRegion（）支持Layouts中的动态区域，如：

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

我在我的代码中尝试过（使用Marionette 1.0.2）并且我没有让它工作。我的模板中没有id =“some-element”的div，我怀疑这可能是原因。我希望木偶会创造这个div本身。

也许我对动态添加区域意味着什么是错误的。所以我的第一个问题是：在向布局动态添加区域时，必须在布局中是否存在addRegion（）函数中传递的元素id？

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

Answer 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());

Answer 2

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

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

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

2 个答案: