How to create an action helper that points to a route with a text value using ember.js

Question

I'm writing a simple sort / pagination controller using ember pre 1.0. I want to change the sort property on the controller when the user clicks a column header on the table. I have a simple action helper that points to my routers sortUser method but I can't seem to pass in a raw string that the route can use as the param such as "username" or "id"

Also my url seems broken (getting this url)

http://localhost:8000/#/sort/undefined

instead of

http://localhost:8000/#/sort/username

Thank you in advance

<table width="250px">
<thead>
<th><a {{action sortUsers "id" href=true}}>id</th>                                        
<th><a {{action sortUsers "username" href=true}}>username</th>
<th>update</th>
<th>delete</th>
</thead>
<tbody>

Here is my router (cutting out some complexity but it is a nested route)

PersonApp.Router = Ember.Router.create({
  root: Ember.Route.extend({
    index: Ember.Route.extend({
      route: '/',
      paginateUsers: Ember.Route.transitionTo('paginated'),
      sortUsers: Ember.Route.transitionTo('index.sort.index'),
      connectOutlets: function(router, context) {
        router.get('applicationController').connectOutlet('person', router.get('store').findAll(PersonApp.Person));
      },
      index: Ember.Route.extend({
        route: '/'
      }),
      paginated: Ember.Route.extend({
        route: '/page/:page_id',

        connectOutlets: function(router, context) {
          router.get('personController').set('selectedPage', context.page_id);
        },

        exit: function(router) {
          router.get('personController').set('selectedPage', undefined);
        }
      }),
      sort: Ember.Route.extend({
        route: '/sort/:column',

        serialize: function(router, context) {
          if (context) { return { sort: context.sort } }
          return {sort: undefined}
        },

        deserialize: function(router, context) {
          return { sort: context.column }
        },

        connectOutlets: function(router, context) {
          router.set('personController.sortProperties', ['username']);
          router.get('personController').set('selectedPage', 1);
        },

UPDATE

I have a full jsfiddle of this in action now (the sorting along side filter + pagination)

could you try to replace the sortUsers: Ember.Route.transitionTo by sortUsers: function(router, context){ }, in order to log the context ? — sly7_7, Sep 20 '12 at 07:04

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

I think you may have a combination of maybe 2 smaller issues contributing to your problem.

Your sortUsers action points to an index route under your sort route. I don't see such a route in the code you include. I only see a sort/:column route.

I had problems getting routes similar to this working yesterday and ended up with something like the following to get the "context" right. I am not at all certain you should have to do that but it got things working for me.
```
sortUsers: function(router, event) {
  // you can now also console.log here as suggested by sly7_7
  router.transitionTo('index.sort', event.context);
},
```
Your serialize/deserialize methods don't look right. They may be fine but from my outside perspective they look broken. Serialize should take whatever you have as the "context" and turn it into an url parameter. Deserialize should do the opposite and return exactly the same as what serialize get as input.
```
serialize: function(router, context) {
  return {
    column: context // you are passing a string so let's just put that in the url as is 
  }
},
deserialize: function(router, urlParams) {
  return urlParams.column; // just return the straight string from the url
}
```

There might be some detail I am missing but that looks like a few changes that might get your transition to run.

Also, make sure you ask the router to log what it is doing... then you can also track your progress better. enableLogging: true

Thanks for the feedback -this got me on the right track. For anyone who might follow checkout the jsfiddle I link to above for a full search/sort/paginated array controller example in ember pre 1.0 — Toran Billups, Sep 23 '12 at 23:49

How to create an action helper that points to a route with a text value using ember.js

1 Answers1