# How use sort comparator in component

**URL:** <https://forums.bitovi.com/t/how-use-sort-comparator-in-component/253>\
**Category:** CanJS\
**Created:** [May 3, 2016, 2:14pm UTC](https://forums.bitovi.com/t/how-use-sort-comparator-in-component/253 "2016-05-03T14:14:13Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Maj0rrush](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/maj0rrush/32/117_2.png) [@Maj0rrush](https://forums.bitovi.com/u/Maj0rrush)\
**Post date:** [May 3, 2016, 2:14pm UTC](https://forums.bitovi.com/t/how-use-sort-comparator-in-component/253/1 "2016-05-03T14:14:14Z")

</div>

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](http://jsbin.com/liwizez/edit?html,js,output)

---

<div class="post-metadata">

**Author:** ![DylanRoss](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/dylanross/32/71_2.png) [@DylanRoss](https://forums.bitovi.com/u/DylanRoss)\
**Post date:** [May 3, 2016, 5:46pm UTC](https://forums.bitovi.com/t/how-use-sort-comparator-in-component/253/2 "2016-05-03T17:46:28Z")

</div>

I see a few issues in your JSBin.

**First,**

```auto
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.

```auto
portals: data

```

**Second,**

```auto
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](http://jsbin.com/qabicugupi/edit?html,js,output)

---

<div class="post-metadata">

**Author:** ![Maj0rrush](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/maj0rrush/32/117_2.png) [@Maj0rrush](https://forums.bitovi.com/u/Maj0rrush)\
**Post date:** [May 3, 2016, 6:55pm UTC](https://forums.bitovi.com/t/how-use-sort-comparator-in-component/253/3 "2016-05-03T18:55:34Z")

</div>

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 ?

---

<div class="post-metadata">

**Author:** ![DylanRoss](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/dylanross/32/71_2.png) [@DylanRoss](https://forums.bitovi.com/u/DylanRoss)\
**Post date:** [May 3, 2016, 7:12pm UTC](https://forums.bitovi.com/t/how-use-sort-comparator-in-component/253/4 "2016-05-03T19:12:29Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Maj0rrush](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/maj0rrush/32/117_2.png) [@Maj0rrush](https://forums.bitovi.com/u/Maj0rrush)\
**Post date:** [May 3, 2016, 7:57pm UTC](https://forums.bitovi.com/t/how-use-sort-comparator-in-component/253/5 "2016-05-03T19:57:54Z")

</div>

Hi, i updated my bin …

http://jsbin.com/liwizez/embed?htaml,js,output

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… . !?

---

<div class="post-metadata">

**Author:** ![DylanRoss](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/dylanross/32/71_2.png) [@DylanRoss](https://forums.bitovi.com/u/DylanRoss)\
**Post date:** [May 3, 2016, 8:30pm UTC](https://forums.bitovi.com/t/how-use-sort-comparator-in-component/253/6 "2016-05-03T20:30:07Z")

</div>

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

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

```

Then you can `{{#each portals}}`. [http://jsbin.com/dosirecibu/edit?html,js,output](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:

```auto
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.

---

<div class="post-metadata">

**Author:** ![Maj0rrush](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/maj0rrush/32/117_2.png) [@Maj0rrush](https://forums.bitovi.com/u/Maj0rrush)\
**Post date:** [May 5, 2016, 5:37pm UTC](https://forums.bitovi.com/t/how-use-sort-comparator-in-component/253/7 "2016-05-05T17:37:38Z")

</div>

Wow that´s awesome … Gracias … 🙂