In my ember app, I have a list of users that is filterable and sortable. In order to achieve the filtering and sorting, I am using an Ember.computed.filter
and Ember.computed.sort
computed properties that build on each other, like so (truncated for brevity):
Ember.ArrayController.extend({
sortField: 'nickname',
sortDir: 'asc',
sortedUsers: Ember.computed.sort('filteredUsers', 'usersSorting'),
usersSorting: Ember.computed('sortField', 'sortDir', function() {
return [this.get('sortField') + ':' + this.get('sortDir')];
},
filteredUsers: Ember.computed.filter('model', function() {
//[...matching logic here that uses filNickname, filAgeMin, ect...]
return matchesFilters;
}).property('model', 'filNickname', 'filAgeMin', 'filAgeMax' 'filGender')
});
My question is, when used like this, are the Ember.computed.filter
and Ember.computed.sort
computed properties supposed to return a brand new array each time they recompute, and therefore cause my entire {{each sortedUsers}}
list to re-render, or is it only supposed to remove/add/rearrange array elements in the same array, so that only those individual list items are modified in the DOM?
The reason I ask is because in my initial testing, it seems like the entire list is definitely being re-rendered each time, and was wondering if maybe its due to how I’m implementing these properties. While I don’t know much on the subject, from glancing at Ember.computed.filter/sort
’s internals, it looks like they use arrayComputed, which I thought was not supposed to create a new array each time.
A follow up question: This list will also most likely contain a relatively large number of users at some point, easily in the hundreds. Similar to how (I’m assuming) Ember.computed.filter works, is there a way to limit the number of items that are rendered, to create a paginated or “Click to load more” type infinite list, without resorting to using something like Array.slice
, which again, would cause a new array to be created, and re-render the entire list?