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
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"]);
}
})