2016-02-28 21 views
3

我有这个标记:流星和把手:每N-性损益后的新行

<div class="row"> 
    {{#each items}} 
    <div class="col-md-4>{{ItemHere}}</div> 
    {{/each}} 
</div> 

我需要行每3个单元组,例如:

<div class="row"> 
    <div class="col-md-4>Item1</div> 
    <div class="col-md-4>Item2</div> 
    <div class="col-md-4>Item3</div> 
</row> 
<div class="row"> 
    <div class="col-md-4>Item4</div> 
    <div class="col-md-4>Item5</div> 
    <div class="col-md-4>Item6</div> 
</row> 
... 

我如何能实现这与Blaze?有没有内置的函数或帮助器?

回答

2

我想创建一个帮手,你的数据分成数组的数组:

// Helper: 
Template.templateName.helpers({ 
    getItemsInGroupsOfThree(array) { 
    var result = []; 
    var currentResultIndex = 0; 
    for(var i = 0; i < array.length; i++) { 
     if(i % 3 === 0) { 
     if(i !== 0) currentResultIndex++; 
     result.push({ items: [ array[i] ] }); 
     } else { 
     result[ currentResultIndex ].items.push(array[i]); 
     } 
    } 
    return result; 
    } 
}); 

//Template: 
{{#each itemGroup in getItemsInGroupsOfThree items}} 
    <div class="row"> 
    {{#each item in itemGroup.items}} 
     <div class="col-md-4> 
     {{ItemHere}} 
     </div> 
    {{/each}} 
    </div> 
{{/each}} 

助手创建阵列最多三个每个数组中的项目的数组。基本上使用创建的组来添加每一行,然后组内的项目创建列和输出值。

希望这有助于!

+0

你是对的+1 –

+0

这个工作很完美,谢谢! – bartezr