Question

我正在创建一个动态仪表板，目前正在尝试使用ContainerView和forWidget的childViews来实现。我现在要做的是分组，或者更确切地说围绕子项的子集。举一个正确的例子：所以我要说我创建4个子视图

App.IndexView = Ember.ContainerView.extend({
    classNames: ['dashboard'],
    childViews: ['LinechartView', 'TableView', 'BarchartView', 'TabletwoView'],
    ...

因此，按预期工作正常，它只是在每个周围创建4个div。但是我现在要做的是在前两个和后两个之间放置一个div，所以我可以把它们放在同一个“行”中（使用bootstrap）。我是否正确地认为我必须为每一行创建一个子视图，这是另一个容器视图，每个元素或列都是其子视图？或者有更简单的方法吗？

为了澄清，目前我的DOM结构如下所示：

<div id="ember308" class="ember-view dashboard">
    <div id="ember311" class="ember-view">LinechartView</div>
    <div id="ember314" class="ember-view">TableView</div>
    <div id="ember317" class="ember-view">BarChartView</div>
    <div id="ember320" class="ember-view">TabletwoView</div>    
</div>

我希望我的DOM结构如下：

<div id="ember308" class="ember-view dashboard">
    <div class="row">
        <div id="ember311" class="ember-view span6">LinechartView</div>
        <div id="ember314" class="ember-view span6">TableView</div>
    </div>
    <div class="row">
        <div id="ember317" class="ember-view span6">BarChartView</div>
        <div id="ember320" class="ember-view span6">TabletwoView</div>
    </div>
</div>

更多的是围绕视图而不是附加的span6类包装行。真的很感激任何帮助。欢呼声。

Answer 1

更新：嵌套containerview变得非常复杂 - 比如你有一个3x2网格，然后用户调整窗口大小，现在你要在顶行显示4和第二行中的2 - 如果对行使用嵌套容器视图，这是一件痛苦的事。

如果您希望仪表板的内容根据用户的需求动态更改（例如，一些有3个小部件，有些有15个，可以拖放重新排序），我认为坚持下去是最有意义的一层containerview，然后使用CSS将它们设置为网格。你可以“模拟”一个squary网格，而你的底层DOM实际上是一个div列表：这是一个例子：http://yaleclassroulette.com/。这使用同位素库：http://isotope.metafizzy.co/index.html。

<强>原始：虽然你的解决方案（创建嵌套的containerviews，行的内部）可以工作，但我很好奇为什么你需要容器视图。

您是否考虑过放弃容器视图，而是在模板中进行布局？因此，将App.IndexView从ContainerView更改为由模板支持的视图，您可以根据自己的喜好对其进行构建，并使用{{outlet}}或{{view}}填充子视图。

示例：

index_view.js：

 App.IndexView = Ember.View.extend({
   templateName: "index.hbs"

index.hbs：

 <div class="row1">
     {{view App.LinechartView stuffBinding="whatever.you.need.for.initialization"}}
     {{view App.TableView stuffBinding="whatever"}}
 </div>
 <div class="row2">
     {{view App.BarchartView stuffBinding="whatever"}}
     {{view App.TabletwoView stuffBinding="whatever"}}
 </div>

如果您想要更多地控制所显示的内容，可以使用插座替换视图。一般情况下，如果您希望对视图进行编程控制并且不关心结构，则使用ContainerView - 在这种情况下您是否会这样做？

Answer 2

每当您想要在主模板周围放置辅助模板时，您可以使用layout属性。

http://emberjs.com/api/classes/Ember.View.html，然后转到布局查看API。

使用layoutName属性让它由模板支持。

容器视图中的“组”子视图

2 个答案: