如何添加在{{#each}}环元件之间的隔板，只是在最后一个元素之后？(How do I add a

我在那里我试图生成一个逗号分隔的从一个数组的项目列表的把手模板。

在我的车把模板：

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

我想,到最后一个项目不会出现。 有没有办法在车把做到这一点还是我需要回落到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:

您可以使用标准的CSS来做到这一点：

li:after {
    content: ',';
}

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

我更喜欢单独的规则，而是一个更简洁，如果略少可读的版本（从@Jay在评论）：

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

Answer 2:

我知道我迟到了部分，但我发现了一个WAYYYY简单的方法

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

Answer 3:

由于灰烬V1.11你能得到的每一个使用块参数的指标。 在你的情况，这将是这个样子：

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

第一index值将是0 ，这将评估为false ，并且将不会被添加，所有后续值将评估为true ，这将在前面加上一个隔板。

Answer 4:

我意识到这是一岁，但我有一个类似的问题，在这里结束了。 就我而言，我其实是处理一个阵列。 所以，这里是我的解决方案。

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

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

我去了一个简单而优雅的解决方案，保持CSV逻辑的模板。

Answer 5:

我创建九月块帮手：

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

用法：

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

支持else语句。

Answer 6:

与Ember 2.7，你可以做到这一点，你安装后ember-truth-helpers ：

ember install ember-truth-helpers

然后你的模板将是这样的：

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

Answer 7:

我得到这个与freak3dot的回答修改后的版本工作：

handlebars.registerHelper('csv', function(items, options) {
  return items.map(function(item) {
    return options.fn(item)
  }).join(', ')
})

（这是一个节点的应用程序，所以更改map据此强调，或者如果你正在构建的浏览器等等）

允许格式化每个逗号之间的对象：

{{#csv players}
  {{firstName}} {{lastName}}
{{/csv}}

编辑：这是一个更加灵活的版本。 加入上的任意分隔的事情的清单。

handlebars.registerHelper('join', function(items, separator, options) {
  return items.map(function(item) {
    return options.fn(item)
  }).join(separator)
})

和模板：

{{#join players ' vs '}
  {{firstName}} {{lastName}}
{{/join}}

Answer 8:

也许对于这种情况下，你应该建立收集，不会对成员项意见迭代的视图。 在这种情况下，一个车把迭代器是矫枉过正。 在我下面的例子，在Person对象更改的firstName或lastName的将被绑定到列表和更新视图。

模板：

{{App.listController.csv}}

使用Javascript：

App = Ember.Application.create();

var Person = Ember.Object.extend({
    firstName: null,
    lastName: null
});

var bob = Person.create({
    firstName: "bob",
    lastName: "smith"
});

var ann = Person.create({
    firstName: "ann",
    lastName: "doe"
});

App.listController = Ember.Object.create({
    list: [bob, ann],
    csv: Ember.computed(function () {
        var arr = [];
        this.get('list').forEach(function (item, index, self) {
            arr.push(item.firstName + ' ' + item.lastName);
        })
        return arr.join(',');
        }).property('[e-mail]', '[e-mail]')
});
// any changes to bob or ann will update the view
bob.set('firstName', 'tim');
// adding or removing from the array will update the view
App.listController.get('list').pushObject(Person.create(firstName: "Jack", lastName:"Dunn"});

下面是我原来的答复，即没有为这个环境中工作。

你应该能够与助手要做到这一点：

Handlebars.registerHelper('csv', function(items, options) {
  var out = "";
  for(var i=0, l=items.length; i<l; i++) {
    out += options.fn(items[i]);
    if (i < l - 1) {
        out += ',';
    }
    // might want to add a newline char or something
  } 
  return out;
});

// then your template would be
{{#csv list}} {{name}} {{status}} {{/each}}

文章来源: How do I add a separator between elements in an {{#each}} loop except after the last element?