Ember.js

Question

我有一个 Ember.js 应用程序，它要求我以 6 个为一组呈现内容。例如，我有一个包含 18 个的模型 'activities.' 我需要将活动以六个为一组进行分组，所以我将分成三组，每组六个。我知道我不能在 Handlebars 中使用非布尔条件，所以有人知道如何最好地实现以下概念吗？

<script type="text/x-handlerbars" data-template-name="categories">
  {{#each activity in parentController.activity}}
    // For every sixth item, start a new grouping
    {{#if activity.index() % 6 == 0}}
      <div class="activityBlock">
         // Render views 1 - 6 the first time, 7 - 12 the second time, and 13 - 18 the third time
         {{view "activity"}}
      </div>
    {{/if}}
  {{/each}}
</script>

<script type="text/x-handlebars" data-template-name="activity">
   {{item.title}}
</script>

Answer 1

扩展@MatthewBlancarte 在评论中所说的内容，您可以执行以下操作：

App.IndexController = Ember.ArrayController.extend({
  categorySlices: function(){
    var model = this.get('model')
    var slice1 = model.slice(0, 6);
    var slice2 = model.slice(6, 12);
    var slice3 = model.slice(12);

    return [slice1, slice2, slice3];
  }.property('model')
})

然后，您的模板可能如下所示：

<script type='text/x-handlebars' id='index'>
  {{#each slice in categorySlices}}
    {{#each item in slice}}
      {{ item }}<br>
    {{/each}}
    <p>
  {{/each}}
</script>

查看可行的解决方案here

Ember.js - 根据当前模型项索引有条件地显示模板内容

Ember.js - conditionally display template content based on current model item index

javascript