EmberJS 如何构建动态过滤答案

【问题标题】：EmberJS How build a dynamic filteringEmberJS 如何构建动态过滤
【发布时间】：2017-01-25 02:06:43
【问题描述】：

我有一个可以排序、过滤和查询的项目列表。

对它们进行排序很容易：

var ToDoList = Ember.Object.extend({
  // using standard ascending sort
  todosSorting: ['name:desc'],
  sortedTodos: Ember.computed.sort('todos', 'todosSorting')
});

然后您可以轻松地将todosSorting 的值更改为例如['name:asc'] 或每个待办事项的名称。 EmberJS Magic 会对所有内容进行排序。您甚至可以将todosSorting 更改为待办事项的另一个属性，它就可以工作。

过滤似乎没有那么强大。您可以给出一个函数或一个键加值。它没有排序那么强大。您可以更改每个待办事项的过滤属性，列表将被过滤。但是如何改变过滤器的值或键呢？

有没有办法实现与.sort() 一样的灵活性？

例如：

var ToDoList = Ember.Object.extend({
  todosFilteringKey: 'priority',
  todosFilteringValue: 1,
  filteredTodos: Ember.computed.filter('todos', 'todosFilteringKey', 'todosFilteringValue')
});

目前我是这样实现的：

var ToDoList = Ember.Object.extend({
  currentFilter: 'all',
  filterBy: Ember.computed('currentFilter', function() {
    return this.filters[this.get('currentFilter')];
  }),

  filters: {
    all: function(item) {
      return true;
    },

    priority1: function(item) {
      return item.get('priority') === 1;
    },

    priority2: function(item) {
      return item.get('priority') === 2;
    },
  }

  filteredTodos: Ember.computed('todos', 'filterBy', 'todos.@each.priority', function () {
    return this.filter();
  }),

  filter: function() {
    return this.get('todos').filter(function(todo) {
      return this.get('filterBy')(todo);
    }.bind(this));
  },
});

如果您有多种过滤可能性，这将无法很好地扩展

【问题讨论】：

标签： javascript sorting ember.js filtering

【解决方案1】：

您可以通过多种不同的方式编写此内容。与sort 不同，filter 和filterBy API 不提供按给定键和值动态过滤的方法。但是您可以使用如下代码自行实现该 API：

var filterByKeyAndValue = function filterByKeyAndValue(items, key, value) {
  return items.filter(function (item) {
    return Ember.get(item, key) === value;
  });
};

var ToDoList = Ember.Object.extend({

  currentPriority: null,

  filteredTodos: Ember.computed('todos', 'todos.@each.priority', 'currentPriority', function() {
    if (!this.get('currentPriority')) {
      // slice ensures we consistently return a new Array.
      return this.get('todos').slice();
    }

    return filterByKeyAndValue(this.get('todos'), 'priority', this.get('currentPriority'));
  }),

});

这有用吗？

我已在此处硬编码密钥 ('priority')，但当然，您也可以将其分解到 Ember.Object 中。

【讨论】：