Question

说我有一个类似的数组：

var values = [
  Ember.Object.create({id: 1, name: 'One'}),
  Ember.Object.create({id: 2, name: 'Two'}),
  Ember.Object.create({id: 3, name: 'Three'})
];

我想创建一个链接到每个不同对象的句子。输出将生成如下内容：

{{link-to 'One' 'my-route' 1}}, {{link-to 'Two' 'my-route' 2}}, and {{link-to 'Three' 'my-route' 3}}

将输出一个句子，其中每个单词链接到不同的路线：

One, Two, and Three

是否可以动态执行此操作？我知道如果我只是迭代数组（see example），如何创建动态链接列表：

{{#each item in values}}
  <li>{{link-to item.name 'my-route' item.id}}</li>
{{/each}}

但这并不能让我灵活地在最后用'和'创建一个以逗号分隔的列表。

Answer 1

我创建了一个计算属性来提供一些额外的信息。假设values是控制器上的属性：

listValues: function() {
    return this.get('values').map(function(item, index, array) {
        return {
            item: item,
            isLastItem: index === array.length - 1
        };
    });
}.property('values.[]')

然后，在您的模板中：

{{#each listValues}}
    {{#if isLastItem}}
        and <li>{{link-to item 'my-route' item.id}}</li>
    {{else}}
        {{! Notice the trailing comma }}
        <li>{{link-to item 'my-route' item.id}}</li>,
    {{/if}}
{{/each}}

Answer 2

这有点像黑客攻击，但您可以创建一个计算属性，它是除最后一项之外的所有项目，以及另一个用于返回最后一项的计算属性。

然后，在您的代码中，您#eeto通过除最后一项之外的所有项目，然后执行and {{lastItem}}。例如：

{{#each item in allButLast}}
  {{link-to item.name 'test' item.id}}, 
{{/each}}

and {{link-to lastItem.name 'test' lastItem.id}}

以下是jsbin作为示例。

使用link-to从数组生成动态句子

2 个答案: