How to render two column grid with Ember and Htmlbars


#1

I need to render such html code:

<div class="grid">
  <div class="row-fluid">
    <div class="span4">Item #1 (row #1 / column #1)</div>
    <div class="span4">Item #2 (row #1 / column #2)</div>
    <div class="span4">Item #3 (row #1 / column #3)</div>
  </div>
  <div class="row-fluid">
    <div class="span4">Item #4 (row #2 / column #1)</div>
    <div class="span4">Item #5 (row #2 / column #2)</div>
    <div class="span4">Item #6 (row #2 / column #3)</div>
  </div>
</div>

But I don’t know how I can do it with foreach.

I’m find the solution on stackoverflow http://stackoverflow.com/a/16213602. But is that the best solution?


#2

I would do like this: http://emberjs.jsbin.com/zomebobisi/3/edit?html,js,output


#3

It’s look like good, but you have model in such format:

[[item1, item2, item3], [item4, item5, item6]]

And I have model in another format:

[item1, item2, item3, item4, item5, item6]

#4

You can transform your model so it looks like a table… Some solutions are here http://stackoverflow.com/questions/4492385/how-to-convert-simple-array-into-two-dimensional-arraymatrix-in-javascript-or