除了在最后一个元素之后,如何在{{#each}}循环中的元素之间添加分隔符？

Question

我有一个Handlebars模板,我正在尝试从数组生成以逗号分隔的项目列表.

在我的Handlebars模板中:

{{#each list}}
    {{name}} {{status}},
{{/each}}

我希望,不要出现在最后一项上.有没有办法在Handlebars中执行此操作,还是需要回退到CSS选择器？

更新:基于克里斯托弗的建议,这是我最终实施的内容:

var attachments = Ember.CollectionView.extend({
    content: [],
    itemViewClass: Ember.View.extend({
        templateName: 'attachments',
        tagName: 'span',
        isLastItem: function() {
            return this.getPath('parentView.content.lastObject') == this.get('content');
        }.property('parentView.content.lastObject').cacheable()
    })
}));

在我看来:

{{collection attachments}}

和项目视图:

{{content.title}} ({{content.size}}) {{#unless isLastItem}}, {{/unless}}

Answer 1

我知道我迟到的部分,但我找到了一个更简单的方法

{{#unless @last}},{{/unless}}

Answer 2

从Ember v1.11开始,您可以获得每个使用块参数的索引.在你的情况下,这看起来像这样:

{{#each list as |item index|}}
    {{if index ", "}}{{item.name}} {{item.status}}
{{/each}}

第一个index值将0评估为false和将不被添加,所有后续值将评估为true哪个将添加分隔符.

Answer 3

您可以使用标准CSS执行此操作:

li:after {
    content: ',';
}

li:last-of-type:after {
    content: '';
}

我更喜欢单独的规则,但更简洁,如果可读性略低(来自评论中的@Jay):

li:not(:last-of-type):after {
    content: ',';
}

Answer 4

对于 ember 2.7，您可以在安装后执行此操作ember-truth-helpers：

ember install ember-truth-helpers

然后你的模板将如下所示：

{{#each model as |e|}}
    {{e}}{{#unless (eq e model.lastObject)}}, {{/unless}}
{{/each}}

Answer 5

我意识到这已经有一年了,但我遇到了类似的问题并且在这里结束了.就我而言,我实际上正在处理数组.所以,这是我的解决方案.

Handlebars.registerHelper('csv', function(items, options) {
    return options.fn(items.join(', '));
});

// then your template would be
{{#csv list}}{{this}}{{/csv}}

我想要一个简单而优雅的解决方案,将csv逻辑保留在模板中.

Answer 6

我创建了 sep 块助手：

Handlebars.registerHelper("sep", function(options){
    if(options.data.last) {
        return options.inverse();
    } else {
        return options.fn();
    }
});

用法：

{{#each Data}}
   {{Text}}{{#sep}},{{/sep}}
{{/each}}

支持 else 语句。