私は私のコンポーネントで次のコードを持って

Question

計算プロパティで繰り返しコードを取り除く：

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とハンドルバーでできるのですか？

Answer 1

- あなたは単一の計算された特性の中のingredientsNames配列を計算し、hbsの各ブロックヘルパーを使ってそれにアクセスすることができます。

ingredientNames: Ember.computed('suggestedIngredients.[]', function() { 
     let ingredientNamess = []; 
     const store = this.get('simpleStore'); 
     if (this.get('suggestedIngredients.length') > 0) { 
      for (var i = 0; i < 3; i++) { 
       var sugIngredient = this.get('suggestedIngredients').objectAt(i); 
       if (Ember.isPresent(sugIngredient)) { 
        var ingredient = store.find('ingredient', sugIngredient.get('ingredientId')); 
        ingredientNamess.push(ingredient.get('name')); 
       } 
      } 
     } 
     return ingredientNamess; 
    }), 

-その他の方法では、ヘルパーを作成して、suggestIngredientsとindexを渡して結果を返すことができます。