Ember.js를 사용하여 목록 하위 집합을 (보기에서) 표시하는 방법은 무엇입니까?

Question

API에서 Ajax를 통해 가져온 객체 목록이 있습니다. 내가 {{#each App.cardsController}}를 사용하는 경우

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 
    } 
}); 

, 나는 내 컨트롤러 내부의 모든 카드를 나열 : 그것은이 비슷한입니다.

하지만 색상별로 필터링하고 싶습니다. 목록 (컨트롤러의 콘텐츠 내부)을 필터링하고 표시하려면 어떻게합니까? 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}}을 추가했다.

하지만 내 크롬 콘솔에서 다음과 같은 오류가 점점 오전 : 내가 잘못 뭐하는 거지

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

? 또는 무엇을해야합니까? 그 논리를보기로 옮겨야합니까? 방법? 심지어 array을 Ember.Array.create(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/