計算プロパティで繰り返しコードを取り除く:私は私のコンポーネントで次のコードを持って
firstIngredientName: Ember.computed('suggestedIngredients.[]', function() {
const store = this.get('simpleStore');
if (this.get('suggestedIngredients.length') > 0) {
let sugIngredient = this.get('suggestedIngredients').objectAt(0);
let ingredient = store.find('ingredient', sugIngredient.get('ingredientId'));
return ingredient.get('name');
}
}),
secondIngredientName: Ember.computed('suggestedIngredients.[]', function() {
const store = this.get('simpleStore');
if (this.get('suggestedIngredients.length') > 1) {
let sugIngredient = this.get('suggestedIngredients').objectAt(1);
let ingredient = store.find('ingredient', sugIngredient.get('ingredientId'));
return ingredient.get('name');
}
}),
thirdIngredientName: Ember.computed('suggestedIngredients.[]', function() {
const store = this.get('simpleStore');
if (this.get('suggestedIngredients.length') > 2) {
let sugIngredient = this.get('suggestedIngredients').objectAt(2);
let ingredient = store.find('ingredient', sugIngredient.get('ingredientId'));
return ingredient.get('name');
}
})
あなたは別の各プロパティは、同様の参照として、唯一の違いは、配列のインデックスです。
はここに私のテンプレートです:
<span>Some text - {{firstIngredientName}}</span>
<span>Some text - {{secondIngredientName}}</span>
<span>Some text - {{thirdIngredientName}}</span>
それは本当にこのような繰り返しのコードを書くために痛いので、私は私のコンポーネントを簡素化する方法を探してみてください。私は次のようなものを求めています:
<span>Some text - {{ingredient 0}}</span>
<span>Some text - {{ingredient 1}}</span>
<span>Some text - {{ingredient 2}}</span>
emberjsとハンドルバーでできるのですか?
ヘルパーを作成し、 'suggestedIngredients'と' index'を渡して結果を返すのはどうでしょうか? – kumkanillam
次に、このヘルパーに 'store'へのアクセスを提供する必要があります。それは可能なのですか? – Crabar
はい可能です。 'Ember.Helper.extend({store:Ember.inject.service()}}}});'私はストアをヘルパーに注入すると思います私たちは[この](https://guides.emberjs.com/v2.8.0/templates/writing-helpers/#toc_class-based-helpers)を見つけました。 – kumkanillam