ember.js - Conditionally starting and ending a div using each helper -

i using bootstrap , need conditionally start <div class="row"> depending on index of item; in case, each row has 2 items.

{{#each items |item index|}}   {{#if item.isstartrow}}       <div class="row">   {{/if}}    ...my code here    {{#if item.isendrow}}       </div>   {{/if}} {{/each}} 

the trouble htmlbars validates div has starting , ending tag, therefore above not work. can suggest workaround?

the end result if there 6 items in array:

<div class="row">    <div class="col-md-6">item 1...</div>    <div class="col-md-6">item 2...</div> </div> <div class="row">    <div class="col-md-6">item 3...</div>    <div class="col-md-6">item 4...</div> </div> <div class="row">    <div class="col-md-6">item 5...</div>    <div class="col-md-6">item 6...</div> </div> 

it's turned out different scenario once you've updated question, , how i'd approach this

<script type="text/x-handlebars" data-template-name="components/item-row"> {{#each chunks |chunk|}}   <div class="row">   {{#each chunk |item|}}         <div class="col-md-6">{{item}}</div>   {{/each}}   </div> {{/each}} </script> 

js component class

app.itemrowcomponent = ember.component.extend({   chunks : function(){     var items = this.get('rows.[]').slice(0); // make copy     var count = math.ceil(items.get('length')/2);     var chunks = [];     for(var = 0 ; < count ; i++){       chunks.push(items.splice(0,2));     }     return chunks;   }.property('rows.[]') }); 

demo

you free customize child element if make component. it's added flexibility.