最後の要素の後を除く{{#each}}ループ内の要素間にセパレータを追加するにはどうすればよいですか？

Question

私は配列から項目のカンマ区切りリストを生成しようとしているハンドルバーテンプレートを持っています。私のハンドルバーテンプレートで

：

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

私は,が最後の項目に表示しないようにしたいです。 Handlebarsでこれを行う方法はありますか？それともCSSセレクタに落ちる必要がありますか？

UPDATE：クリストファーの提案に基づき、これは私が実装してしまったものです：

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

（コメント内の@Jayから）：

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

Answer 2

このコンテキストでは、コレクションではなく、メンバーアイテムのビューの反復ではありません。この場合、ハンドルバーイテレータは過剰です。次の例では、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"}); 

以下は、この文脈では動作しませんでした私の元の答えは、です。

あなたはヘルパーでこれを行うことができる必要があります：

li:after { 
    content: ','; 
} 

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

は、私は別のルールを好むが、わずかに少ない場合はより簡潔な：あなたはこれを行うには、標準のCSSを使用することができます

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}} 

Answer 3

私はこれが1年であることを認識していますが、レムとここに巻き込まれている。私の場合、私は実際に配列を扱っていました。だから、私の解決策です。

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

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

私はテンプレートにcsvロジックを保持するシンプルで洗練されたソリューションを検討していました。

Answer 4

Ember v1.11以降、ブロックパラメータを使用してそれぞれのインデックスを取得できます。あなたのケースでは、これはこのようなものになります。

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

最初index値はなります0falseに評価され、追加されることはありません、それ以降のすべての値は、区切り文字を付加しますtrueと評価されます。

Answer 5

私はfreak3dotの答えの修正版で、この作業を得た：

（これはノードアプリですので、あなたがブラウザで構築している場合はアンダースコアまたは何でもそれに応じ mapを変更）

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

は、各コンマの間でオブジェクトをフォーマットすることができます：

{{#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 6

私は9月ブロックヘルパーを作成しました：

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

使用法：

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

は、elseステートメントをサポートします。

Answer 7

私は部品に遅刻が、私はあなたがember-truth-helpersをインストールした後、あなたがこれを行うことができます残り火2.7でWAYYYY簡単な方法

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

Answer 8

を見つけた知っている：

ember install ember-truth-helpers 

してからテンプレート

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