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)

Answer 1

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

1. 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);
   },
   

2. 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