Ember.computed.sort property not updating


#1

Hi Guys,

I’ve been cracking my head for the last several days, trying to understand what am I doing wrong. I’m implementing an infrastructure of lists for my app, which can include paging/infinite scroll/filtering/grouping/etc. The implementation is based on extending controllers (not array controllers, I want to be Ember 2.0 safe), with a ‘content’ array property that holds the data.

I’m using Ember.computed.sort for the sorting, and it’s working, but i have a strange behaviour when i try to change the sorter. the ‘sortedContent’ is not updating within the ‘displayContent’, even though the ‘sortingDefinitions’ definitions are updated.

This causes a weird behaviour that it will only sort if I “sort” it twice, as if the sorting was asynchronous.

I am using Ember 1.5 (but it also happens on 1.8) (attaching a snippet of code explaining my problem)

sortingDefinitions: function(){
	var sortBy = this.get('sortBy');
	var sortOrder = this.get('sortOrder') || 'asc';
	
	if (_.isArray(sortBy)) {
		return sortBy;
	}
	else {
		return (sortBy ? [sortBy + ':' + sortOrder] : []);
	}
}.property('sortBy', 'sortOrder'),

sortedContent: Ember.computed.sort('content', 'sortingDefinitions'),




displayContent: function() {
	var that = this;
	var sortBy = this.get('sortBy');
	var sortOrder = this.get('sortOrder');
	var list = (sortBy ? this.get('sortedContent') : this.get('content'));

	var itemsPerPage = this.get('itemsPerPage');
	var currentPage = this.get('currentPage');
	var listItemModel = this.get('listItemModel');

	return list.filter(function(item, index, enumerable){
		return ((index >= (currentPage * itemsPerPage)) && (index < ((currentPage + 1)  * itemsPerPage)));
	}).map(function(item) {
		var listItemModel = that.get('listItemModel');
		if (listItemModel) {
			return listItemModel.create(item);
		}
		else {
			return item;
		}
	});
	
}.property('content.length', 'sortBy', 'sortOrder', 'currentPage', 'itemsPerPage')

Thanks in advanced, Manu


#2

Where does content come from?


#3

Use Ember.isArray not _.isArray, I believe they have different behaviour on some ember objects


#4

content is the array where i store the data


#5

it didn’t help. where I add a breakpoint at the displayContent, I can see that the ‘sortingDefinitions’ are updated, bit the ‘sortedContent’ is not. When I sort the second time, the ‘sortedContent’ is correct, as if it took it some time…


#6

Oh, I see now it’s just a simple computed property error.

Your computed property depends on the array sortedContent. This is not in your dependent keys.

Furthermore, it’s an array dependent key, so it must be specified as such in your dependent key listing. E.g. sortedContent.[] or sortedContent.@each.someProperty. See the relevant guide section for details. If you access any property in a computed property, it must be correctly added in the dependent keys or you will have problems with data not updating


#7

god I feel so stupid. of course it worked. added ‘sortedContent.[]’ to the properties list of ‘displayContent’ did the trick. Thanks Alex.

BTW, how badly does adding such dependency hurt the performance?


#8

Not really sure what you mean by this question, the dependency is required for it to work so you can’t really compare performance against a solution that does not work