我有一个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}}
答案 0 :(得分:117)
我知道我迟到了,但我找到了一个更简单的方法
{{#unless @last}},{{/unless}}
答案 1 :(得分:56)
从Ember v1.11开始,您可以获得每个使用块参数的索引。在你的情况下,这看起来像这样:
{{#each list as |item index|}}
{{if index ", "}}{{item.name}} {{item.status}}
{{/each}}
第一个index
值将0
将评估为false
并且不会被添加,所有后续值将评估为true
,这将预先设置分隔符。
答案 2 :(得分:53)
您可以使用标准CSS执行此操作:
li:after {
content: ',';
}
li:last-of-type:after {
content: '';
}
我更喜欢单独的规则,但更简洁,如果可读性略低(来自评论中的@Jay):
li:not(:last-of-type):after {
content: ',';
}
答案 3 :(得分:5)
我意识到这已经有一年了,但我遇到了类似的问题并且在这里结束了。就我而言,我实际上正在处理数组。所以,这是我的解决方案。
Handlebars.registerHelper('csv', function(items, options) {
return options.fn(items.join(', '));
});
// then your template would be
{{#csv list}}{{this}}{{/csv}}
我想要一个简单而优雅的解决方案,将csv逻辑保留在模板中。
答案 4 :(得分:4)
我创建了sep block helper:
Handlebars.registerHelper("sep", function(options){
if(options.data.last) {
return options.inverse();
} else {
return options.fn();
}
});
用法:
{{#each Data}}
{{Text}}{{#sep}},{{/sep}}
{{/each}}
支持其他声明。
答案 5 :(得分:4)
使用ember 2.7,您可以在安装ember-truth-helpers
后执行此操作:
ember install ember-truth-helpers
然后您的模板将如下所示:
{{#each model as |e|}}
{{e}}{{#unless (eq e model.lastObject)}}, {{/unless}}
{{/each}}
答案 6 :(得分:3)
我使用了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}}
答案 7 :(得分:2)
也许对于此上下文,您应该为集合创建视图,而不是成员项的视图迭代。在这种情况下,Handlebar迭代器是过度的。在下面的示例中,对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('list.@each.firstName', 'list.@each.lastName')
});
// 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}}