2

I am looking for an implementation of the bootstrap grid with rows and device sensitive columns within the {{#each}} iterator of the Ember Handlebar template.

There doesn't seem to be a way to look up the iterator index value to add bootstrap rows.

I found this thread, but the solution doesn't seem to work with relational models. How to render a (Twitter Bootstrap) grid using Ember.js and Handlebars.js?

My model has 2 objects (populated from the server using RESTAdapter).

  1. Container Object

    • id
    • name
    • pictures (linked using DS.hasMany)

  2. Item Object

    • id
    • name
    • container (linked using DS.belongsTo)

I need this when viewing a single container which may contain many items. Here is the desired output (edited from other SO issue):

<h2>Container Name</h2>
<div class="row-fluid">
<div class="col-md-4">Item #1 (row #1 / column #1)</div>
<div class="col-md-4">Item #2 (row #1 / column #2)</div>
<div class="col-md-4">Item #3 (row #1 / column #3)</div>
</div>
<div class="row-fluid">
<div class="col-md-4">Item #4 (row #2 / column #1)</div>
<div class="col-md-4">Item #5 (row #2 / column #2)</div>
<div class="col-md-4">Item #6 (row #2 / column #3)</div>
</div>
<div class="row-fluid">
<div class="col-md-4">Item #7 (row #3 / column #1)</div>
</div>
Community
  • 1
  • 1
Abhishek Tiwari
  • 23
  • 4
  • I have looked at using something like this http://ember-addons.github.io/bootstrap-for-ember/ However they dont seem to have the grid implementation yet. – Abhishek Tiwari Jul 17 '14 at 21:55
  • http://stackoverflow.com/questions/11884960/how-to-get-index-in-handlebars-each-helper – Oliver Jul 17 '14 at 22:15
  • @Oliver Thanks for the link. {{@index}} is not available in Ember. I found an internal way of doing it with {{_view.contentIndex}}. However it isnt much use with the example above – Abhishek Tiwari Jul 17 '14 at 22:52

1 Answers1

0

The Handlebars #each syntax in Ember now supports exposing the current index on each iteration

{{#each model as |article index|}}
  <h2>{{article.title}}</h2>
  <h2>{{index}}</h2>
{{/each}}
Ten Bitcomb
  • 2,316
  • 1
  • 25
  • 39