“Group” childviews in ContainerView

Question

I am creating a dynamic dashboard and currently trying to achieve that with an ContainerView and childViews for the Widgets. What I want to do now, is group, or rather wrap a div around a subset of childs. To give the proper example: So lets say I create 4 childviews

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

So that works fine, as expected and it simply creates 4 divs around each. But what I want to do now, is put a div around the first two and the second two, so I can put them in the same "row" (using bootstrap). Am I right in thinking that I would have to create a childview for each row, that is another containerview with each elements or columns being childviews of that? Or is there a simpler way?

To clarify, currently my DOM structure looks like this:

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

and I want my DOM Structure to be like this:

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

It is more about wrapping the row around the views rather than the additional span6 classes. Any more help is really appreciated. Cheers.

Answer 1

Whenever you want to have a secondary template wrapped around the primary template, you can use the layout property.

http://emberjs.com/api/classes/Ember.View.html, and then go to layout to check out the API.

Use layoutName property to have it backed by a template.

Answer 2

Update: Having nested containerview gets complex really quickly -- say you have a 3x2 grid and then the user resizes the window, and now you want to show 4 on the top row and 2 on the second row -- this is a pain to do if you use nested container views for rows.

If you want the contents of the dashboard to change dynamically based on what the user wants (i.e., some have 3 widgets, some have 15, can drag and drop to reorder), I think it makes the most sense to stick with one layer of containerview, and then use CSS to style them into grid. You can "simulate" a squary grid while your underlying DOM is actually a list of divs: here's an example: http://yaleclassroulette.com/. That uses the isotope library: http://isotope.metafizzy.co/index.html.

Original: While your solution (creating nested containerviews, the innerones for the rows) would work, I'm curious why you need the container view.

Have you considered ditching the container view, and doing the layout in a template instead? So change App.IndexView from ContainerView to a view backed by a template, which you can structure to your liking, and fill its child views using either {{outlet}} or {{view}}.

Example:

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>

You can replace the views with outlets if you want more control over what is shown. In general, ContainerView is used if you want programmatic control over the views and care less about the structure -- do you in this case?