Question

免责声明：我问了一个类似的问题earlier，但我现在提供一个更简单的例子和一个jsfiddle。

我试图设置一个主 - 细节视图，其中模型更改仅发生在主路径上，但我希望细节路径能够立即反映对同一模型中相应项目所做的任何更改。目前，只有在导航到另一个主项目并返回时，我才能看到更新。

我试图设置与主控制器模型的绑定，并观察细节控制器对其的任何更改。

我有以下模板：

<script type="text/x-handlebars" data-template-name="people">
    <h1>People of interest</h1>
    <ul id="master">
        {{#each model}}
        <li>
            <span>{{name}} ({{age}}) {{#link-to 'person' this}}More info{{/link-to}}</span>
        </li>
        {{/each}}
    </ul>
    <div>
        {{outlet}}
    </div>
</script>
<script type="text/x-handlebars" data-template-name="person">
    <h2>{{name}}'s items</h2>
    <ul>
        {{#each items}}
        <li>{{this}}</li>
        {{/each}}
    </ul>
</script>

和以下代码：

App = Ember.Application.create({});

App.Router.map(function() {
    this.resource('people', {path: '/'}, function() {
        this.resource('person', {path: ':person_id'});
    });
});

var data = Ember.A([
    Ember.Object.create({id: 1, name: 'Ben', age: 30, items: ['Apple']}),
    Ember.Object.create({id: 2, name: 'Annya', age: 31, items: ['Pencil']})
]);

App.PeopleIndexRoute = Ember.Route.extend({
    redirect: function() {
        this.transitionTo('person', data.findBy('id', 1));
    }
});

App.PeopleRoute = Ember.Route.extend({
    model: function() {
        Ember.run.later(function() {
            // Issue here. How do I automatically update the detail view to show this change?
            data.replace(0, 1, [Ember.Object.create({id: 1,
                                 name: 'Ben',
                                 age: 30,
                                 items: ['Apple', 'Toy']})]);
            console.log('model changed');
        }, 1000);   
        return data;
    }
});

App.PersonController = Ember.ObjectController.extend({
    init: function() {
        console.log('person controller init');
    },
    needs: ['people'],
    parentModel: Ember.Binding.oneWay('controllers.people.model'),
    parentModelDidChange: function() { // this never fires
        console.log('parentModel changed');
        // update model here
    }.observes('parentModel')
});

我已经设置了一个jsfiddle here。在我的实际应用程序中，使用服务器已发送事件并在主路由上设置EventSource来传输数据。这里的transitionTo只是为了使插图更实用。

如您所见，身份1的人被预先装好。我想要发生的是在查看该人的详细视图（person路线）时，当people路线的模型更新该人时，{{1}控制器应以某种方式知道这一点，更新自己的模型，并显示更改。但这些都不会发生。当person运行时，Ember.run.later无法启动。

Answer 1

当您观察数组时，请使用'@each'。 Here is the working demo。我添加了一个按钮，用于修改父控制器中的模型。您可以单击它并通过检查控制台查看观察者发射。

parentModelDidChange: function() { // this never fires
    console.log('parentModel changed');
    // update model here
}.observes('parentModel.@each')

EmberJS：Master-detail，如何将细节模型绑定到主数组模型中的项目

1 个答案: