Wie verwendet man eine gefilterte berechnete Eigenschaft mit sortierbaren Objekten von ember-drag-drop?

Question

Ich verwende ember-drag-drop, um eine sortierbare Liste zu implementieren. Dies funktionierte gut, bis ich einen Textfilter auf der Liste implementieren musste.

Die filteredItems ist eine berechnete Eigenschaft, die die ursprüngliche Liste basierend auf der Texteingabe eines Benutzers filtert.

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; 
    } 
}), 

Das Problem ist, dass eine berechnete nicht (normalerweise) zurückgeschrieben werden kann. Das eigentliche Ziehen und Ablegen funktioniert (die Elemente werden in einer anderen Reihenfolge im Browser angezeigt), die ursprüngliche Datenreihenfolge der items ändert sich jedoch nicht.

Wie kann ich immer noch die Sortierung des ursprünglichen Datensatzes zulassen und trotzdem filtern?

Answer 1

Embers berechnete Eigenschaften können auch setted sein. In Ihrem Fall müssen Sie durch Aktivieren der Set-Funktion (von this working twiddle) wie folgt berechnet definieren:

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; 
    } 
})