EmberJS動的フィルタリングの構築方法

Question

ソート、フィルタリング、およびクエリが可能なアイテムのリストがあります。

var ToDoList = Ember.Object.extend({ 
    // using standard ascending sort 
    todosSorting: ['name:desc'], 
    sortedTodos: Ember.computed.sort('todos', 'todosSorting') 
}); 

は、その後、あなたが簡単に例えばしtodosSortingの値を変更することができます。

ソートそれらは非常に簡単です。 ['name:asc']またはそれぞれのToDoの名前。 EmberJS Magicはすべてを並べ替えます。 todosSortingをtodosの別の属性に変更することもできます。それだけで動作します。

フィルタリングはあまり強力ではありません。関数またはキーに値を指定することができます。それはソートほど強力ではありません。それぞれのToDoのフィルタリングされたプロパティを変更すると、リストがフィルタリングされます。しかし、フィルタの値やキーを変更するには？

.sort()のような柔軟性を実現する方法はありますか？

例：

var ToDoList = Ember.Object.extend({ 
    todosFilteringKey: 'priority', 
    todosFilteringValue: 1, 
    filteredTodos: Ember.computed.filter('todos', 'todosFilteringKey', 'todosFilteringValue') 
}); 

私はこのようにそれを達成瞬間：

var ToDoList = Ember.Object.extend({ 
    currentFilter: 'all', 
    filterBy: Ember.computed('currentFilter', function() { 
    return this.filters[this.get('currentFilter')]; 
    }), 

    filters: { 
    all: function(item) { 
     return true; 
    }, 

    priority1: function(item) { 
     return item.get('priority') === 1; 
    }, 

    priority2: function(item) { 
     return item.get('priority') === 2; 
    }, 
    } 

    filteredTodos: Ember.computed('todos', 'filterBy', 'todos.@each.priority', function() { 
    return this.filter(); 
    }), 

    filter: function() { 
    return this.get('todos').filter(function(todo) { 
     return this.get('filterBy')(todo); 
    }.bind(this)); 
    }, 
}); 

これは、あなたが複数のフィルタリングの可能性

Answer 1

を持っている場合、別の数がありますうまくスケールしませんあなたがこれを書く方法。 sortとは異なり、filterとfilterBy APIは、指定されたキーと値で動的にフィルタリングする手段を提供しません。しかし、次のようなコードでこのAPIを実装することができます：

var filterByKeyAndValue = function filterByKeyAndValue(items, key, value) { 
    return items.filter(function (item) { 
    return Ember.get(item, key) === value; 
    }); 
}; 

var ToDoList = Ember.Object.extend({ 

    currentPriority: null, 

    filteredTodos: Ember.computed('todos', 'todos.@each.priority', 'currentPriority', function() { 
    if (!this.get('currentPriority')) { 
     // slice ensures we consistently return a new Array. 
     return this.get('todos').slice(); 
    } 

    return filterByKeyAndValue(this.get('todos'), 'priority', this.get('currentPriority')); 
    }), 

}); 

これは役に立ちますか？

ここでキーをハードコードしましたが（'priority'）、もちろんEmber.Objectにもそれを考慮することができます。