ember-drag-drop sortable-objectsでフィルタリングされた計算済みプロパティを使用するにはどうすればよいですか？

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でもあります。 あなたのケースでは、あなたはこのように（this working twiddleから）セットの機能を有効にすることで、あなたの計算を定義する必要があります：あなたの2番目のコードブロックで

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