Question

我有一个要显示的对象网格。网格的每一行显示4个对象。根据对象在网格中的位置，我希望某些类位于对象的元素上。例如，网格中的最后一个对象应该具有类“last_in_grid”。此计算取决于数组中对象的索引。

我的模板如下：

{{#each row in objects}}
    {{#each object in row}}
        {{view MyApp.MyView objectBinding="object"}}
    {{/each}}
{{/each}}

MyApp.MyView需要知道each助手迭代中的索引。

理想情况下，我想要类似的东西：

{{#each row in objects}}
    {{#each object in row}}
        {{view MyApp.MyView objectBinding="object" indexBinding="index_of_each_loop"}}
    {{/each}}
{{/each}}

Django的模板语言可以做到这一点：

{% for item in items %}
    {% if forloop.counter0 == 0 %}
        blah blah blah
    {% endif %}
{% endfor %}

https://docs.djangoproject.com/en/1.4/ref/templates/builtins/#for

这可能使用Ember和Handlebars吗？

我是否必须编写each的自定义版本才能执行此操作？

Answer 1

如果您使用CollectionView，该集合的项目/视图可以查询它并查看它们是否是最后一项。

小提琴：http://jsfiddle.net/qKXJt/138/

ArrayControllers只是其内容的代理，它是一个Ember数组。这意味着您将获得Enumerable，Array，MutableArray等所带来的所有好东西。

Answer 2

而不是{{each}}帮助程序，您可以使用{{collection}}帮助程序获取当前的迭代索引，如此小提琴：

http://jsfiddle.net/secretlm/67GQb/73/

HTML：

{{#collection contentBinding="App.peopleController"}}    
    {{#view App.PersonView personBinding="content" indexParentBinding="contentIndex" }}
        <td>{{indexParent}}</td> 
        <td>{{person.fullName}}</td>            
    {{/view}}
{{/collection}}

使用Javascript：

App = Ember.Application.create();

App.Person = Ember.Object.extend({
    fullName: function() {
        return this.get('firstName') + ' ' + this.get('lastName');
    }.property('firstName', 'lastName') 
});

App.peopleController = Ember.ArrayController.create({
    content: [App.Person.create({ firstName: "Yehuda", lastName: "Katz" }),
    App.Person.create({ firstName: "Tom", lastName: "Dale" })]
});

App.PersonView = Ember.View.extend({
    tagName: 'tr',
    indexParent: null    
});

你如何传递{{#each}}的迭代索引？

2 个答案: