Question

I have a simple template that loops over a ember-data model. Inside the loop I want to provide a simple anchor tag that passes the id of the element along to the router so I can transition to another ember view. What I have below shows “undefined” in the href when I hover over the link, but when I log the content in the route it’s the ember-data model (not just the id as I’d like it to be).

<script type="text/x-handlebars" data-template-name="session">
    {{#each session in controller}}
      {{session.id}}<br />
      {{session.name}}<br />
      {{session.room}}<br />
      {{session.desc}}<br />

      {{#each speaker in session.speakers}}
      Speaker: {{speaker.name}}<br />
      {{/each}}

      <a {{action showSessionDetails session href=true}}>View Session Details</a>

      <br /><br />

    {{/each}}                                                                                                
  </script>

Here is the router

CodeCamp.Router = Ember.Router.extend({
  root: Ember.Route.extend({
    index: Ember.Route.extend({
      route: '/',
      showSessionDetails: Ember.Route.transitionTo('sessionDetails'),
      connectOutlets: function(router, context) {
        router.get('applicationController').connectOutlet('session', router.get('store').findAll(CodeCamp.Session)>
      },
      index: Ember.Route.extend({
        route: '/'
      }),
      sessionDetails: Ember.Route.extend({
        route: '/session/:id',
        connectOutlets: function(router, context) {                                                                
          console.log("here " + context);
        }
      })
    })
  })
});

Thank you in advance

Answer 1

Turns out I just needed to implement my own serialize and deserialize methods

    sessionDetails: Ember.Route.extend({
        route: '/session/:session_id',
        connectOutlets: function(router, session) {
          router.get('applicationController').connectOutlet('session', session);
        },                                                                                                         
        serialize: function(manager, session) {
          return { "session_id": session.get('id') }
        },
        deserialize: function(manager, params) {
          return CodeCamp.Session.find(params["session_id"]);
        }
      })