Bootstrap 3 grid w Ember z #each używając modeli relacyjnych - twitter-bootstrap, ember.js, twitter-bootstrap-3, ember-data

Poszukuję implementacji siatki początkowej z wierszami i kolumnami wrażliwymi na urządzenie w {Iteratorze {{.each}} szablonu paska narzędzi Ember.

Nie wydaje się być sposobem na wyszukiwanie wartości indeksu iteratora w celu dodania wierszy bootstrap.

Znalazłem ten wątek, ale rozwiązanie nie działa z modelami relacyjnymi. Jak renderować siatkę (Twitter Bootstrap) za pomocą Ember.js i Handlebars.js?

Mój model ma 2 obiekty (wypełnione z serwera za pomocą RESTAdapter).

1. Obiekt kontenera

   • ID
   • Nazwa
   • zdjęcia (połączone za pomocą DS.hasMany)

2. Obiekt przedmiotu

   • ID
   • Nazwa
   • kontener (połączone za pomocą DS.belongsTo)

Potrzebuję tego, oglądając pojedynczy pojemnik, który może zawierać wiele przedmiotów. Oto pożądany wynik (edytowany z innego problemu SO):

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

Odpowiedzi:

Składnia Handlebars #each w Emberie obsługuje obecnie prezentowanie bieżącego indeksu dla każdej iteracji

{{#each model as |article index|}}
<h2>{{article.title}}</h2>
<h2>{{index}}</h2>
{{/each}}