How use sort comparator in component

CanJS
1

Hi im getting the sort comporator not work . can please someone advise me how to do this ?

The sort should happen when i click on table headers …

http://jsbin.com/liwizez/edit?html,js,output

2

I see a few issues in your JSBin.

First,

portals: {
    value : data
},

That looks like define plugin syntax, but it’s not wrapped in define. Since data is a plain array, you could simply define it like this in your view model.

portals: data

Second,

this.attr('comparator', sortBy);

This is changing the comparator of the viewmodel, not the list. You probably want to do this.attr('portals.comparator', sortBy).

Third, you are missing the sort plugin.

Updated JSBin: http://jsbin.com/qabicugupi/edit?html,js,output

3

Hi,

in real code i used the define plugin and the right syntax…

but when i use this.attr(‘portals.comparator’, sortBy) im getting this error …can.Map: Object does not exist

is portals.comparator not right when use define ?

4

That looks like portals doesn’t exist, which is likely an issue with how it was defined. Ultimately, you want to make sure the comparator is being set on the list. You can inspect the view model at run time to see if it’s where you expect.

I could more easily diagnose the problem if you provide an updated JSBin.

5

Hi, i updated my bin …

can you please explain why the sort here not work ?

Btw.: how can i inspect the data in the model ?
PortalListViewModel.attr(‘portals’) get me an error that attr is not a function… . !?

6

I would change the approach with the promise to something like this:

portals: {
    get: function(lastSetValue, resolve) {
      Portal.findAll({}).then(resolve);
    }
}

Then you can {{#each portals}}. http://jsbin.com/dosirecibu/edit?html,js,output

One pattern that’s been going around lately is to have a promise property alongside the value property:

portalsPromise: {
    get: function() {
        return Portal.findAll({});
    }
},
portals: {
    get: function(lastSetValue, resolve) {
      this.attr('portalsPromise').then(resolve);
    }
}

This allows you to observe the state of the promise by itself to show a loading indicator for instance.

However, I just noticed an issue with this, which is that once the promise resolves, the template will bind to portals for the first time (depending on template code), and due to then(), it will not resolve immediately, which results in the block rendering before the property has a value, which could throw errors if helpers/bindings expect it to exist.

Using the value property of promises seems to be a trend, but I think the reason it isn’t working for you is that you are sorting the promise value directly which might be a bug or not supported.

7

Wow that´s awesome … Gracias … :slight_smile: