如何使用过滤后的计算属性和 ember-拖放可排序对象？

Question

我正在使用 ember-drag-drop 来实现可排序列表。在我需要在列表中实现文本过滤器之前，这一直很好用。

{{#sortable-objects sortableObjectList=filteredItems enableSort=true}}
  {{#each filteredItems as |item index|}}
    {{#draggable-object content=item isSortable=true isDraggable=true}}
      {{item.name}}
    {{/draggable-object}}
  {{/each}}
{{/sortable-objects}}

filteredItems 是一个计算属性，它根据用户的文本输入过滤原始列表。

filteredItems: computed('items', 'term', function() {
  let term = this.get('term');
  let items = this.get('items');

  if (term.length > 0) {
    return items.filter(item => item.conditions.some(cond => cond.field.toLowerCase().indexOf(term) > -1 || (cond.term && cond.term.toLowerCase().indexOf(term) > -1)));
  } else {
    return items;
  }
}),

问题是计算不能（通常）写回。实际的拖放工作（项目在浏览器中以不同的顺序出现），但是，items 的数据原始顺序没有改变。

如何在允许过滤的同时允许对原始项目数据集进行排序？

Answer 1

Ember的计算属性也可以是setted。在您的情况下，您需要通过启用 set 函数（来自 this working twiddle）来定义您的计算，如下所示：

filteredItems: Ember.computed('items', 'term', {
    get(key) {
      let term = this.get('term');
      let items = this.get('items');

      if (term && term.length > 0) {
        let filteredItems = items.filter(item => item.name.indexOf(term) > -1);
        return filteredItems;
      } else {
        return items;
      }
    }, 
    set(key, value) {
      let items = this.get('items');
      let filteredItemsCount = 0;
      let newItems = Ember.makeArray();
      items.forEach(function(item, index){
        if(value){
          if(value && value.indexOf(item) > -1){
             newItems[index] = value[filteredItemsCount];
             filteredItemsCount++;
          }
          else{
            newItems[index] = items[index];
          }
        }
        else{
            newItems[index] = items[index];
        }
      });

      this.set('items', newItems);

      return value;
    }
})

如何使用过滤后的计算属性和 ember-拖放可排序对象？

How to use a filtered computed property with ember-drag-drop sortable-objects?

ember.js

computed-properties

如何使用过滤后的计算 属性 和 ember-拖放可排序对象？

How to use a filtered computed property with ember-drag-drop sortable-objects?

ember.js

computed-properties

如何使用过滤后的计算属性和 ember-拖放可排序对象？