從計算屬性返回承諾

Question

我意識到有類似這樣的幾個問題，但沒有一個答案似乎解決了我的問題。我的目標是獲取language的列表，並對它們進行過濾，以便我的模板可以顯示完整列表的子集。

我開始通過驗證我的計算物業工作：

MyController.js

// Works as expected 
languagesFiltered: function() { 
    return this.get('languages'); 
}.property('languages') 

然後我在過濾器中添加的功能，但在這裏就是我遇到了麻煩：

MyController.js

languagesFiltered: function() { 
    // console.log shows that languages is actually a promise 
    var languages = this.get('languages'); 

    // all of this returns a promise, but Handlebars can't handle the promise 
    return languages.then(function(languagesArray) { 
     return languagesArray.filter(function(item, index, enumerable) { 
     return item.get('name') !== 'English'; 
     }); 
    }) 
}.property('languages') 

我試圖使用Ember.Array.filter方法（http://emberjs.com/api/classes/Ember.ArrayProxy.html#method_filter）。該過濾器似乎工作正常，但現在languagesFiltered返回一個承諾，Handlebars無法處理。

我想最後一個選擇：

MyController.js

languagesFiltered: function() { 
    var languages = this.get('languages'); 

    // "return languages;" works 
    // But "return languages.filter" returns an empty array 
    return languages.filter(function(item, index, enumerable) { 
     console.log(item); 
     return true; 
    }); 
}.property('languages') 

而且console.log(item)不會被調用。所以我的問題是：

• 什麼是最好的方式來實現簡單的過濾器我後？
• 這是一個只讀的計算屬性，但在計算屬性中處理異步值的最佳做法是什麼？

我使用Ember 1.7.0-beta4，Ember Data 1.0.0-beta10和ember-cli 0.44。我會升級到Ember 1.7.0，但是有一個小錯誤影響了我們應用程序的另一部分，所以我們要等到1.7.1。感謝您的輸入！

Answer 1

您可以嘗試退回PromiseArray而不僅僅是承諾。

你應該能夠做這樣的事情..

languagesFiltered: function() { 
    // all of this returns a promise, but Handlebars can't handle the promise 
    var promise = this.get('languages').then(function(languagesArray) { 
     return languagesArray.filter(function(item, index, enumerable) { 
     return item.get('name') !== 'English'; 
     }); 
    }) 

    return DS.PromiseArray.create({ 
     promise: promise 
    }); 

}.property('languages') 

Answer 2

現在有一些更好的解決方案。我使用ember-promise-helpers。

這樣可以讓你的languagesFiltered代碼不變，做你的哈佛商學院裏面的以下內容：

{{#each (await languagesFiltered) as|lang|}} 
... 
... 

更多 - https://emberigniter.com/guide-promises-computed-properties/