如何使用Ember.js顯示（在視圖中）列表子集？

Question

我有一個對象列表，通過Ajax從API中獲取。它類似於這樣：

App.Card = Ember.Object.extend({ 
    name: "", 
    color: "" 
}); 

App.cardsController = Ember.ArrayController.create({ 
    content: [], 

    createCard: function(data) { 
    this.pushObject(App.Card.create(data)); 
    }, 

    loadCards: function() { 
    // Fetch API and use createCard 
    } 
}); 

當我使用{{#each App.cardsController}}，我列出所有的卡我的控制器內。

但我想按顏色過濾它們。我如何過濾列表（在Controller內容中）並顯示它們？

我嘗試這樣的做法：

添加代碼裏App.cardsController：

filterCardsByColor: function() { 
    array = this.get('content').filter(function(item, index) { 
     return item.get('color') == 'red'; 
    }); 
    return array; 
    }.property('content.@each') 

並補充{{#each App.cardsController.filterCardsByColor}}我的看法。

但我收到以下錯誤，在我的Chrome控制檯：

Uncaught TypeError: Object [object Object] has no method 'addArrayObserver' ember.min.js:18 

我做錯了嗎？或者我該怎麼做？我應該將該邏輯移至一個視圖嗎？怎麼樣？我甚至嘗試在Ember.Array.create(array)內包裝array，但它沒有解決我的問題。

獎勵：是否可以發送參數到filterCardsByColor，所以我可以要求'red'卡或'yellow'卡等？

Answer 1

做到這一點的最好辦法是存儲陣列，將持有的顏色過濾掉（或過濾器，如果你願意的話），每一次都有所計算的屬性更新其length通過指定的變化.property('colours.length');：

filteredContent: function() { 
    // Triggered every time a colour is added/removed. 
    var colours = this.get('colours'); 
    return this.get('content').filter(function(model) { 
     // Determine whether the current model's colour is in the array of those filtered. 
     return Boolean(jQuery.inArray(model.get('colour'), colours) == -1); 
    }); 
}.property('colours.length') 

然後，我們只需要爲我們的看法能在色彩傳遞給添加到陣列的方式。我們可以用一個不同的函數applyFilters來完成這個工作，它將接受一個參數 - 我們希望排除的顏色。您可以像{{action}}那樣傳遞此顏色：<a {{action "applyFilter" "red"}}>。

applyFilter: function(colour) { 
    var colours = this.get('colours'); 
    if (!colour) { 
     // Clear all of the colours if we're clearing the filters. 
     colours.clear(); 
     return; 
    } 

    // Otherwise we can push the new colour into the array, which will trigger 
    // an update of the filteredContent computed property. 
    colours.pushObject(colour); 
} 

完全符合工作的jsfiddle你周圍的混亂：http://jsfiddle.net/9XmqL/

Answer 2

不幸的是，我不認爲WildHoney的是最好的答案。

添加以下到他們的CSS：

@-webkit-keyframes onUpdate { 
    from { background: yellow; } 
} 
@keyframes onUpdate { 
    from { background: yellow; } 
} 
* { 
    -webkit-animation: onUpdate 1s; 
    animation: onUpdate 1s; 
} 

我可以看到，當內容被更新，整個列表被重繪。對於很長的名單，這可能是一個嚴重的表現。

爲了避免這種情況，您應該只生成一次提供filteredContent的數組 - 當指向內容的指針發生變化時 - 根據對子集的更改以目標方式更新它。

見http://jsfiddle.net/wRzRn/2/