ember handlebars 模板中具有单个数组的多个 ul

Question

假设我有一个包含 6 个项目的数组，我想每个列表打印 3 个

例

//arr = [1,2,3,4,5,6];
//html
<div class="first">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>

<div class="second">
  <ul>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</div>

如何使用 ember/handlebars 完成此操作？谢谢

Answer 1

一种选择是在您的控制器上编写计算属性，将较大的数组拆分为数组数组。

然后您可以遍历计算的数组属性并使用一个组件来显示每个较小的数组。

除非你有其他问题，否则我会把这个作为练习留给你。

Answer 2

与@Oren 所说的类似，您需要在控制器内装饰您的模型（数组），然后在车把中显示装饰后的模型（因为无法在车把本身内部执行逻辑） .

所以，类似于：

App.IndexController = Ember.ArrayController.extend({
  decoratedModel: function(){
    var model = this.get('model');
    return [
      Ember.Object.create({
        className: "first",
        arr: model.slice(0, 3)
      }),
      Ember.Object.create({
        className: "second",
        arr: model.slice(3)
      })
    ];
  }.property('model')
});

然后，您可以在模板中显示如下：

<script type="text/x-handlebars" data-template-name="index">

  {{#each item in decoratedModel}}
    <div {{ bind-attr class=item.className}}>
      <ul>
      {{#each thing in item.arr }}
        <li>{{thing}}</li>
      {{/each}}
      </ul>
    </div>
  {{/each}}
</script>

Answer 3

我结束了这个：

在template.hbs

{{#each set in arraySets}}
  <div class="col-sm-6">
    <ul class="list-unstyled">
      {{#each item in set }}
        <li>{{item.name}}</li>
      {{/each}}
    </ul>
  </div>
{{/each}}

在相关控制器中

import Ember from "ember";
import Collection from "../../utils/collection";

export default Ember.ObjectController.extend({

    // ....

    arraySets: function() {
        var infos = this.get('model.infos');
        return Collection.create({ content: infos }).divide();
    }.property()
});

谁在努力工作utils/collection.js

import Ember from "ember";

var Collection = Ember.ArrayProxy.extend({
    divide: function (size = 2) {
        var array = this.get('content');
        var length = array.length;
        var limit = Math.ceil(length / size);
        var sets = Ember.A([]);

        for (var i = 0; i < Math.min(size, length); i++) {
            sets.pushObject(array.slice(i * limit, (i + 1) * limit));
        }

        return Collection.create({content: sets});
    }
});

export default Collection;

希望这对其他人有帮助！

ember handlebars 模板中具有单个数组的多个 ul

Multiple ul with single array in ember handlebars template

handlebars.js

ember.js