1

API から Ajax 経由で取得したオブジェクトのリストがあります。これは次のようなものです。

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}}、コントローラー内のすべてのカードを一覧表示します。

しかし、それらを色でフィルタリングしたいと思います。リスト (コントローラのコンテンツ内) をフィルタリングして表示するにはどうすればよいですか?

私はこのアプローチを試しました：

内部にこのコードを追加しました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

私が間違っていることは何ですか？または、どうすればよいですか？そのロジックをビューに移動する必要がありますか? どのように？array内にラップしようとEmber.Array.create(array)しましたが、問題は解決しませんでした。

おまけ: filterCardsByColor にパラメーターを送信して、'red'カードや'yellow'カードなどを要求することは何とか可能ですか?

4

2 に答える 2

2

これを行う最善の方法は、フィルターで除外する(または、必要に応じてフィルターで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これは、 1 つの引数 (除外したい色) を受け取る別の関数を呼び出すことで実行できます。この色は、次の{{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/

于 2013-02-11T10:27:19.167 に答える