卡住了與Ember.js移交計算屬性模板

I'm相當新的餘燼發展，需要在處理這類任務的幫助：卡住了與Ember.js移交計算屬性模板

目前，我在灰燼-CLI應用燈具的工作。涉及的兩款車型分別是：

var Recipe = DS.Model.extend({ 
    title: DS.attr('string'), 
    body: DS.attr('string'), 
    ingredients: DS.hasMany('ingredients',{async: true}), 
    recipeCategory: DS.belongsTo('recipeCategory', {async: true}) 
}); 

var Ingredient = DS.Model.extend({ 
    title: DS.attr('string'), 
    portion: DS.attr('string'), 
    groupTag: DS.attr('string'), 
    recipe: DS.belongsTo('recipe') 
});

雖然在列出所有成分沒有問題 - 也會分類 - 用於通過嵌套的路線稱爲特定配方，

this.resource('recipes',function(){ 
    this.resource('recipe', {path: '/:recipe_id'}); 
});

我遇到了很大的問題，而分組成分由groupTag。分組的邏輯不是問題，但是我要麼遇到訪問控制器中模型的競爭條件以獲得計算屬性，要麼嘗試處理模板中的承諾時出現框架錯誤。

以下是有關模板：

//recipe.hbs 
<strong>{{recipeCategory.title}}</strong> 
<h3>{{title}}</h3> 
{{render 'ingredients' ingredients}} 

//ingredients.hbs 
<strong>Zutaten</strong> 
<ul> 
    {{#each groupedIngredients}} 
     <li>{{group}} 
     <ul> 
      {{#each items}} 
       <li>{{portion}} {{title}}</li> 
      {{/each}} 
     </ul> 
     </li> 
    {{/each}} 
</ul>

我的主料 - 控制器是這樣的：

var IngredientsController = Ember.ArrayController.extend({ 
    sortProperties: ['title'], 
    sortedIngredients: Ember.computed.sort('model', 'sortProperties'), 
    groupedIngredients: function(){ 
     return this.get('model').then(function(ingredients){ 
      var groupTags = ingredients.mapBy('groupTag').uniq(); 
      var groupedIngredients = groupTags.map(function(gtag){ 
      return { 
       group: gtag, 
       items: ingredients.map(function(item){ 
        if (item.get('groupTag') == gtag){ 
        return item; 
        } 
       }).compact() 
      }; 
     }); 
     console.log(groupedIngredients); 
     return groupedIngredients; 
     }); 
    }.property('model') 
});

承諾內的控制檯日誌是好的，但我無法回報進行評估的承諾到模板：

Uncaught Error: Assertion Failed: The value that #each loops over must be an Array. You passed {_id: 158, _label: undefined, _state: undefined, _result: undefined, _subscribers: }

當我刪除承諾，只是在這個工作g et（'model'），計算的數組充滿了未定義的值，導致模型似乎沒有被完全加載。如何解決這個問題，以這種方式處理異步模型數據？謝謝！

來源

2014-11-05 Krakenfuss

你不需要在掛起get('model')做你的計算。在您的代碼中達到這一點時，模型已經解決並準備就緒。路由器已經確保模型承諾在繼續之前得到解決。

因此：

groupedIngredients: function(){ 
    var ingredients = this.get('model'); 
    var groupTags = ingredients.mapBy('groupTag').uniq(); 
    var groupedIngredients = groupTags.map(function(gtag){ 
     return { 
      group: gtag, 
      items: ingredients.map(function(item){ 
       if (item.get('groupTag') == gtag){ 
        return item; 
       } 
      }).compact() 
     }; 
    }); 
    console.log(groupedIngredients); 
    return groupedIngredients; 
}.property('@each.groupTag')

爲了避免必須做compact，只是改用filter：

items: ingredients.filter(function(item){ 
    return item.get('groupTag') === gtag; 
}

其是相同

items: ingredients.filterBy('groupTag', gtag)

Here的一個實施作爲計算機的groupBy你可能會適應，如果它可以讓你只是做

groupedIngredients: Ember.computed.groupBy('groupTag')

來源

2014-11-06 01:57:10

完美！非常感謝！在燼中有很多東西需要學習......而這會清除一點霧氣。 – Krakenfuss 2014-11-06 08:04:15

我和我的代碼有類似的問題，它通常處理爲計算屬性設置錯誤的依賴關係。

基於您的代碼，我會說你groupedIngredients：財產大概應該是沿着線：

.property('@each.groupTag')

一旦設置正確，你應該能夠從你的控制器中刪除的承諾，因爲它會自動更新一旦履行承諾。

來源

2014-11-06 01:18:31 Cho

謝謝你的提示也是解決方案的正確方向！ – Krakenfuss 2014-11-06 08:05:04

卡住了與Ember.js移交計算屬性模板

回答

相關問題