incorrect display of attributes in child route

Question

I'm using Ember 1.2, Handlebar 1.12, and EmberModel (not EmberData).

In my application, I have the common parent/child relationship in my route map, with a simple model similar to that shown below.

App.Router.map(function () {
    this.resource('strats', {path: "/"}, function() {
        this.route('strat', {path: "/strat/:strat_id"});
    });
});

App.Item = Ember.Model.extend({
  id : Ember.attr(),
  itemName : Ember.attr()
});

App.Strat = Ember.Model.extend ({
   id : Ember.attr(),
   stratName : Ember.attr(),
   stratDetail : Ember.attr(),
   items : Ember.hasMany ('App.Item', {key: 'items', embedded: true})
});

As in many of the examples, I display strat.id on the left side (using the Handlebar #each helper), and details (i.e., strat.id, strat.stratName and strat.stratDetail) for the selected 'strat' on the right side. To add a new 'strat', I use a button connected to the action function "newStrat," which is shown below.

When adding a new child, everything displays correctly when there's already another child present (e.g., everything works fine when adding the 2nd and subsequent child). But if I'm adding the first child, strat.Id doesn't get displayed on the left side, but strat.id, strat.stratName and strat.stratDetail do get displayed on the right side. If I then call this.get('model').save() and hit the browser's refresh button, display is as expected on both left and right side (as a result of a request for data sent to the server, and the server replying with all saved data).

What's causing this behaviour? Is there anyway to fix it?

When there's no data, in reply to findAll(), my server returns {"strats":" "}. Does what I return for the no-data scenario have anything to do the problem?

Controller

App.StratsController = Ember.ArrayController.extend({
actions: {
    newStrat: function() {

    var nwStrat = 
        {
           id: "newId",
           stratName: "untitled",
           stratDetail: "someDetail"
        };

        var newStrat = App.Strat.create (nwStrat);
        this.get('model').pushObject(newStrat);

        this.transitionToRoute ('strats.strat', newStrat);
        }
}});

Code Snippet from template that displays left side

  <div class=\"list-group\" style=\"margin-top: 10px\">
  {{#each controller}}                          
    {{#linkTo \"strats.strat\" this class=\"list-group-item\"}}
      {{id}}
    {{/linkTo}}       
  {{/each}}
  </div>