emberjs-1.0 problems with link-to- and serialize when router-has-a-dynamic-segment

Question

I have a jsfiddle with nested route where I am nesting one dynamic routes timeSlot inside another dynamic route appointment. Inside the appointment template I have a #link-to 'timeSlot'. When I click that link, the timeSlot template is never rendered and in the console I see:

 This link-to is in an inactive loading state because at least one of its parameters presently has a null/undefined value, or the provided route name is invalid.  

This is the router. Note that if I changed the timeSlot route from a dynamic route to a normal route, that is to something link this, this.resource('timeSlot'), the error goes away and the template is displayed. The route needs to be dynamic, as it accepts dates passed in via users click from a calendar.

It is a small jsfiddle and 95% of the code in the jsfiddle is pasted in this question:

App.Router.map(function(){
  this.resource('appointments', {path: "/"}, function(){ 
    this.resource('appointment', {path: "/:appointment_id"}, function(){
       this.resource('timeSlot', {path: '/:day'});                       
    });     
  });   
});

The appointment route

App.AppointmentRoute = Ember.Route.extend({
   model: function(params){ 
   },

   setupController: function(controller, model){
    this._super(controller, model);
    controller.set('content', model);
   }
 });

The TimeSlot route

App.TimeSlotRoute = Ember.Route.extend({
  model: function(params){   
  },

  setupController: function(controller, model) {
   this._super(controller, model);
   controller.set('content', model);       
  },

  serialize: function(dateText) {
    /*
   return { 
      day: //this.controllerFor('timeSlot').today.pushObject(dateText)};
       */
  } 
 });

The appointment template

<script type="text/x-handlebars" data-template-name="appointment">
   <br/>
   {{#link-to 'timeSlot' [2013-07-18]}}click timeSlot{{/link-to}}

    {{outlet}}
 </script>

The time Slot template

<script type="text/x-handlebars" data-template-name="timeSlot">
<h3> from timeslot template</h3>


{{outlet}}
</script>

update

For this route: this.resource('timeSlot', {path: ':appointment_id/:day'}); Explicitly passing values for each of the dynamic segment to link-to, via {{#link-to 'timeSlot' id=this day=['today'] }}click timeSlot{{/link-to}} in this jsfiddle, has now made it possible to hover over the link and see '#/2/dateText', where each slash segment is meant to be the value for the dynamic segment. Before passing in the value for the dynamic segment, all i saw when I hovered over the link was /#' suggesting the dynamic segment were not being picked.

It is still not working though. Because It using hard-coded values passed in the serialize method and not those passed to link-to.

update 2

This version is working though #linkTo doesn't seem to be calling serialized method. http://jsfiddle.net/GQdbD/5/

Answer 1

It's kind of hard to tell what you're trying to do since all of your model hooks are empty. (Are they actually empty in your app?) In general, when you call link-to, transitionTo, or transitionToRoute Ember expects you to pass in a live model. In these cases the model hook on your route is skipped and the model that you pass to link-to is used instead.