如何根据模型中的记录数量正确添加引导行/列？ [英] ember - How to correctly add bootstrap rows/cols based on number of records in model?

问题描述

我有一个路径 groups.index ，它展示了我应用程序中的所有组。在路线中，我使用 this.store.findAll（'group'）; 来获取所有组，并在groups.index模板中使用each来遍历每个组。我想让每个组都包含在引导程序 col-md-3 类中，这样我就可以为显示组的每行创建4个面板。

我为handlebars创建了一个helper类，用于确定索引是否为0或5的倍数，以确定从哪里开始行。然后，我使用相同的函数来确定索引是否为4的倍数，以确定为行添加结束标记的位置。不过，由于我没有关闭每个 {{＃if}} 块中的div，因此我得到一个构建错误。有没有办法做到这一点？或者是有一种更简单的方法，我失踪了？

groups.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}} 
  

帮助函数

$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ == 0）{
return true;
}
const index = params [0] + 1;
const multiple = params [1];
return（index％multiple == 0）;
}

导出默认值Ember.Helper.helper（isMultiple）;

解决方案

创建计算属性取决于 model 属性。和块模型4，然后在hbs中进行迭代。

准备模型，

 从'ember'导入Ember; 
从'lodash / array'中导入_array; 
 export default Ember.Controller.extend（{
 chunkSpan：4，
 resultModel：Ember.computed（'model'，function（）{
 return _array.chunk（this。 get（'model'）。toArray（），this.get（'chunkSpan'））; 
}），
}）; 
  

要安装lodash，请选择这个答案

要在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}} 
  

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

I have a route groups.index that showcases all the groups in my app. In the route I use the this.store.findAll('group'); to fetch all the groups and in the groups.index template I use the each to go through each group. I want to make it so that each group is contained within a bootstrap col-md-3 class, so that I can make 4 "panels" for each row showcasing the groups.

I made a helper class for handlebars that determines whether the index is at 0, or a multiple of 5, to determine where to start a row. I then use the same function to determine whether the index is a multiple of 4 to determine where to add the closing tag for a row. However I get a build error since I am not closing the divs within each {{#if}} block. Is there a way to make this work? Or is there a simpler way that I am missing?

groups.index template

{{#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}}

helper function

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

解决方案

Create computed property depends on the model property. and chunk model by 4 and iterate it in hbs.

For preparing the model,

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'));
    }),
});

To install lodash, check this answer

To iterate it in 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}}

This is one way of approach. there may be other simple approaches to this.

这篇关于如何根据模型中的记录数量正确添加引导行/列？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！