Question

Seem to have an issue with bindings when accessing an associated DS.model to DS.model array.firstObject. So the path in the fiddle below is App.person.parties.firstObject but it doesn’t seem to bind properly. App.person.parties is bound OK and can be used in the outlet but firstObject never seems to work. Any ideas?

Also I don’t think this is the best approach for nextParty – if anyone could offer some advice on how to structure this it would be much appreciated!

http://jsfiddle.net/mJ7q7/5/

JS: –

/* 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);                            
                }
            }
        })
    })

});

Templates: –

<script type="text/x-handlebars" data-template-name="application">
    <h1>Party app</h1>
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="dashboard">
    <h2>Hi {{content.firstName}} {{content.lastName}}</h2>
    <h3>Next party</h3>
    {{outlet nextParty}}
</script>

<script type="text/x-handlebars" data-template-name="party">

    {{content.name}}

</script>    ​  ​

Answer 1

The firstObject and lastObject properties are not bindable. You can circumvent it by creating a computed property:

myFirstObject: function() {
  return this.get('content.firstObject');
}.property('content.[]')

See here.