1

我有一个对象列表，通过 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}}，我列出了我的控制器内的所有卡。

但我想按颜色过滤它们。如何过滤列表（在控制器的内容中）并显示它们？

我尝试了这种方法：

在里面添加了这段代码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将接受一个参数——我们希望排除的颜色。{{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 回答
1

不幸的是，我不认为 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/

于 2013-09-03T14:58:05.090 回答