title: EmberJS router connectOutlets firstObject binding doesn't seem to propagate
body: <p>Seem to have an issue with bindings when accessing an associated DS.model to DS.model <code>array.firstObject</code>. So the path in the fiddle below is <code>App.person.parties.firstObject</code> but it doesn't seem to bind properly. <code>App.person.parties</code> is bound OK and can be used in the outlet but <code>firstObject</code> never seems to work. Any ideas?</p>
  
  <p>Also I don't think this is the best approach for <code>nextParty</code> - if anyone could offer some advice on how to structure this it would be much appreciated!</p>
  
  <p><a href="http://jsfiddle.net/mJ7q7/5/" rel="nofollow">http://jsfiddle.net/mJ7q7/5/</a></p>
  
  <p>JS: -</p>
  
  <pre><code>/* Flip this switch to compare. You should see 'Ember party' appear after 2s when it works */
  var works = true;
  
  window.App = Em.Application.create({
  
      ready: function() {            
          App.set('person', App.store.find(App.Person, 1));                        
      },
  
      ApplicationView: Em.View.extend({templateName: 'application'}),
      ApplicationController: Em.Controller.extend(),
  
      Router: Em.Router.extend({
  
          root: Em.Route.extend({
  
              index: Em.Route.extend({
  
                  route: '/',
                  connectOutlets: function(router, context) {
  
                      router.get('applicationController').connectOutlet('dashboard', App.get('person'));
                      router.get('dashboardController').connectOutlet('nextParty', 'party',
                          App.get('person.nextParty')
                      );
                  }
              })
          })
      }),
  
      DashboardController: Em.Controller.extend({}),
  
      DashboardView: Em.View.extend({
          templateName: 'dashboard'
      }),
  
      PartyController: Em.Controller.extend({}),
      PartyView: Em.View.extend({
          templateName: 'party'
      }),
  
  
      Party: DS.Model.extend({
          name: DS.attr('string') 
      }),
  
  
      Person: DS.Model.extend({
          firstName: DS.attr('string'),
          lastName: DS.attr('string'),
          parties: DS.hasMany('App.Party'),
  
          nextParty: function() { return this.get('parties.firstObject'); }.property('parties.firstObject')
      }),
  
  
  
  
      store: DS.Store.create({
          revision: 7,
          adapter: DS.Adapter.create({
  
              find: function(store, type, id) {
  
  
  
                  if (type == 'App.Person') {
  
                      if (works) {
  
                           store.load(type, id, {
                              id: 1,
                              firstName: 'John',
                              lastName: 'Jackson',
                              parties: [99]   
                          });
  
                      } else {
  
                          setTimeout(function() {
                              store.load(type, id, {
                                  id: 1,
                                  firstName: 'John',
                                  lastName: 'Jackson',
                                  parties: [99]   
                              });
                          }, 1000);
  
                      }
  
                  }
                  if (type == 'App.Party') {
                      setTimeout(function() {
                          store.load(type, id, {
                              id: 99,
                              name: 'Ember party'  
                          });  
                      }, 2000);                            
                  }
              }
          })
      })
  
  });
  </code></pre>
  
  <p>Templates: -</p>
  
  <pre><code>&lt;script type="text/x-handlebars" data-template-name="application"&gt;
      &lt;h1&gt;Party app&lt;/h1&gt;
      {{outlet}}
  &lt;/script&gt;
  
  &lt;script type="text/x-handlebars" data-template-name="dashboard"&gt;
      &lt;h2&gt;Hi {{content.firstName}} {{content.lastName}}&lt;/h2&gt;
      &lt;h3&gt;Next party&lt;/h3&gt;
      {{outlet nextParty}}
  &lt;/script&gt;
  
  &lt;script type="text/x-handlebars" data-template-name="party"&gt;
  
      {{content.name}}
  
  &lt;/script&gt;    ​  ​
  </code></pre>