1

我正在创建一个动态仪表板，目前正在尝试使用 ContainerView 和小部件的 childViews 来实现这一点。我现在想要做的是分组，或者更确切地说，将一个 div 包裹在一个子集的子集上。举个恰当的例子：假设我创建了 4 个子视图

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

这样就可以正常工作，正如预期的那样，它只是在每个周围创建了 4 个 div。但是我现在想做的是在前两个和后两个周围放置一个 div，这样我就可以将它们放在同一个“行”中（使用引导程序）。我是否认为我必须为每一行创建一个子视图，即另一个容器视图，每个元素或列都是它的子视图？或者有没有更简单的方法？

澄清一下，目前我的 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 类包装行。任何更多的帮助真的很感激。干杯。

4

2 回答 2

0

更新：嵌套containerview很快就会变得复杂——假设你有一个 3x2 网格，然后用户调整窗口大小，现在你想在第一行显示 4，在第二行显示 2——如果这样做很痛苦您对行使用嵌套的容器视图。

如果您希望仪表板的内容根据用户的需要动态更改（即，有些有 3 个小部件，有些有 15 个，可以拖放重新排序），我认为坚持一层最有意义containerview，然后使用 CSS 将它们设置为网格。您可以“模拟”一个方形网格，而您的底层 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"

索引.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如果您希望以编程方式控制视图并且不太关心结构，则使用它——在这种情况下您会这样做吗？

于 2013-03-25T20:22:32.767 回答
0

每当您希望将辅助模板包裹在主模板周围时，都可以使用 layout 属性。

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

使用 layoutName 属性使其由模板支持。

于 2013-03-25T20:36:36.720 回答