Question

我有一条路线groups.index，可以展示我应用中的所有群组。在路由中，我使用this.store.findAll('group');来获取所有组，并在groups.index模板中使用每个组来遍历每个组。我想这样做，以便每个组都包含在一个bootstrap col-md-3类中，这样我就可以制作4＆＃34; panel＆＃34;显示组的每一行。

我为把手制作了一个辅助类，用于确定索引是0还是5的倍数，以确定从哪一行开始。然后，我使用相同的函数来确定索引是否是4的倍数，以确定在哪一行添加行的结束标记。但是我得到了一个构建错误，因为我没有关闭每个{{#if}}块中的div。有没有办法让这项工作？还是有一种我想念的简单方法？

groups.index模板

{{#each model as |group index|}}

{{#if (isMultiple index 5)}}
<div class='row'>
{{/if}}

<div class='col-md-3'>
{{#link-to 'groups.show' group.id}}{{group.name}}{{/link-to}}
</div>

{{#if (isMultiple index 4)}} 
</div>
{{/if}}


{{/each}}

辅助功能

export function isMultiple(params) {
  if (params[0] == 0) {
    return true;
  }
  const index = params[0] + 1;
  const multiple = params[1];
  return (index % multiple == 0);
}

export default Ember.Helper.helper(isMultiple);

Answer 1

创建计算属性取决于model属性。和块模型由4并在hbs中迭代。

准备模型，

import Ember from 'ember';
import _array from 'lodash/array';
export default Ember.Controller.extend({
    chunkSpan: 4,
    resultModel: Ember.computed('model', function() {
        return _array.chunk(this.get('model').toArray(), this.get('chunkSpan'));
    }),
});

要安装lodash，请检查this answer

在hbs中迭代它，

{{#each resultModel as |item|}}
        <div class='row'>
            {{#each item as |group|}}
                    <div class='col-md-3'>
                        {{#link-to 'groups.show' group.id}}{{group.name}}{{/link-to}}
                </div>
        {{/each}}
    </div>
{{/each}}

这是一种方法。可能还有其他简单的方法。

ember - 如何根据模型中的记录数正确添加bootstrap行/列？

1 个答案: