javascript - EmberJS 路由器 connectOutlets firstObject 绑定(bind)似乎没有传播

Question

在访问关联的 DS.model 到 DS.model array.firstObject 时，似乎存在绑定(bind)问题。所以下面 fiddle 中的路径是 App.person.parties.firstObject 但它似乎没有正确绑定(bind)。 App.person.parties 绑定(bind)正常，可以在 outlet 中使用，但 firstObject 似乎永远无法工作。有什么想法吗？

此外，我认为这不是 nextParty 的最佳方法 - 如果有人可以就如何构建它提供一些建议，我们将不胜感激!

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

});

模板:-

<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

firstObject 和lastObject 属性不可绑定(bind)。您可以通过创建计算属性来规避它:

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

参见 here .