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 /把手实现这一目标？感谢

Answer 1

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

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

除非您有其他问题，否则我会将此作为练习。

Answer 2

与@Oren所说的类似，你需要在控制器内装饰你的模型（数组），然后在把手中显示装饰的模型（因为没有办法在把手本身内执行逻辑）。 / p>

所以，比如：

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

我结束了这样做：

in 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车把模板中使用单个阵列的多个ul

3 个答案: