並べ替え可能なリストを実装するために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変更されません。
フィルタリングを許可しながら、元のアイテムのデータセットの並べ替えを許可するにはどうすればよいですか？
Emberの計算されたプロパティも設定できます。あなたの場合、次のように（この作業中のひねりから）集合関数を有効にして計算を定義する必要があります。
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;
}
})
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加