How to trigger a sub-view rendering on initial route render?

Question

I know this is easy to do in the trivial case, but I have added the ability to change which controller & sub-template are used for a particular {{outlet}} sub view, and that has confused me to the point of restoring the basics.

I have a working example on jsbin here. Use this link if you want to jump straight to the screen in question.

The problem arises on the activites\new route. I would like the view to start with the text

Please select a template to continue editing the activity.

When it is initially rendered. But to get this text to appear, you have to select one template, then turn the select back to the prompt - Select Template -.

These are the relevant object which accomplish the selection change template render action.

// NewActivityController extends EditActivityController, so this observable 
// is re-used without being shared
App.EditActivityController = Ember.ObjectController.extend({
    activityTypeDidChange: function() {
      var selectedType = this.get('activityType');
      console.log("EditActivityController ActivityTypeDidChange: "
        + (selectedType && selectedType.get('key') || 'null'));
      this.send('changeType', selectedType);
    }.observes('model.activityType')
});

// The controller dispatches an event to trigger the action in the route
App.NewActivityRoute = App.AuthenticatedRoute.extend({
  renderTemplate: function() {
    this.render('edit_activity', {
      controller: 'new_activity'
    });
    // This doesn't work for setting the initial sub-render
    //var type = model.get('activityType');
    //if(type) {
      //this.render("Edit"+type.key, {into: 'index'});
    //} else {
      //this.render("NoActivityType", {into: 'index'});
    //}
  },
  model: function() {
    return App.Activity.create({
      title: "please enter a title",
      subjectCode: "please enter a subject code",
      activityCode: "please enter an activity code",
      activityType: null
    });
  },
  actions: {
    changeType: function(selection) {
      console.log("NewActivityRoute ChangeType called: "
        + (selection && selection.get('key') || 'null'));
      if(selection) {
        this.render("Edit"+selection.get('key'),
                    {outlet: 'edit', into: 'edit_activity'});
      } else {
        this.render("NoActivityType",
                    {outlet: 'edit', into: 'edit_activity'});
      }
    }
  }
});

As the comments say, you can't get the model on the initial render. Even uncommenting just the model.get line causes the event dispatch between the controller and the route to break.

If you pop open the console, you can see that the EditActivityController's ActivityTypeDidChange observer is fired when the model's activityType is initialized to null. This dispatches the changeType event, but it actually bubbles up to the ApplicationRoute, so the NewActivityRoute can't handle it to render the proper sub-view.

Patrick M Patrick M · Accepted Answer · 2014-03-20T18:48:10

Well, I had a fundamental misunderstanding of the Route.renderTemplate hook. It turns out that you can't just expect the model to be defined in the method, you have to specify it as a parameter.

renderTemplate (controller, model)
_{Defined in packages/ember-routing/lib/system/route.js:1148}

A hook you can use to render the template for the current route.

This method is called with the controller for the current route and the model supplied by the model hook. By default, it renders the route's template, configured with the controller for the route.

Parameters bolded in the function declaration for clarity. Adding the parameters to my renderTemplate code hook works exactly as I expected it to in the first place.

renderTemplate: function(controller, model) {
  this.render('edit_activity', {
    controller: 'new_activity'
  });

  var type = model.get('activityType');
  if(type) {
    this.render("Edit"+type.key,
      {outlet: 'edit', into: 'edit_activity'});
  } else {
    this.render("NoActivityType",
      {outlet: 'edit', into: 'edit_activity'});
  }
}

How to trigger a sub-view rendering on initial route render?

1 Answers