如何将过滤后的计算属性与 ember-drag-drop 可排序对象一起使用？

Posted 2023-02-23

【中文标题】如何将过滤后的计算属性与 ember-drag-drop 可排序对象一起使用？

【英文标题】：How to use a filtered computed property with ember-drag-drop sortable-objects?

【发布时间】：2018-05-04 02:08:41

【问题描述】：

我正在使用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 的数据原始顺序不会改变。

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

【问题讨论】：

在第二个代码块中，计算属性的名称不应该是 filteredItems 而不是 filteredRules

@AhmetEmreKılınç 是的，那是我匿名代码时打错了。

你检查我的答案了吗？

【参考方案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;
    
)