Ember：当子控制器同时观察父控制器触发请求的相同属性时

Question

我创建了一个包含两个子对象控制器和一个父数组控制器的应用程序。路线也以同样的方式描述。

var App = Ember.Application.create({
  LOG_TRANSITIONS: true
});

App.Router.extend(function() {
  this.resource('parent', function() {
    this.route('child1', {
      path: '/'
    });
    this.route('child2');
  });
});

var ParenteRoute = Ember.Route.extend({
  model: function() {
    //Got my model from here.
  };
});

var Child1Route = Ember.Route.extend({
  model: function(){
    return Ember.$.ajax('dummyUrl.com');
  },
  action:{
    refreshData: function(){
      var controller = this.controllerFor('parent.child1');
      return Ember.$.ajax('dummyUrl.com').then(function(response){
        return controller.send('updateModel' response);
      });
    }
  }
});

var ParentController = Ember.ArrayController.extend({
  getFirstName: function() {
    return this.get('model').get('firstName');
  },
  getLastName: function() {
    return this.get('model').get('lastName');
  }
});

var Child1Controller = Ember.ObjectController.extend({
  needs: ['ParentController'],
  getName: function() {
    return this.get('controllers.ParentController.getFirstName')
  },
  updateName: function() {
    this.send('refreshData');
  }.observes('controllers.ParentController.getLastName'),
  actions: {
    updateModel: function(response) {
      this.set('getName', response);
    }
  }
});

var Child2Controller = Ember.ObjectController.extend({
  needs: ['ParentController'],
  getFirstName: Ember.computed.alias('controllers.ParentController.getFirstName')
});

<!--Parent Template--!>
<div>
<input type='text' {{bind-attr value=getFirstName}}>
<input type='text' {{bind-attr value=getLastName}}>
</div>
{{#link-to 'parent.child1'}}child1{{/link-to}}
{{#link-to 'parent.child2'}}child2{{/link-to}}
{{outlet}}

<!--child1 template--!>

<div>
  {{getName}}
</div>

<!--child2 template--!>

<div>
  {{getFirstName}}
</div>

所以上面代码的问题是，当我在父控制器的索引中时，每次调用 child1 的函数 updateName() 并正确执行时都会更改 getLastName 属性。但是，如果通过单击链接移动到 child2 的路由，则在保持 child1 路由活动的同时进行一些更改后，然后当我更改属性 getLastName 时，虽然我在 child2 中，但由于观察到，child1 的 updateName() 函数也被触发函数并抛出错误：

    Uncaught Error: Nothing handled the action 'refreshData'. If you did handle the action, this error can be caused by returning true from an action handler in a controller, causing the action to bubble.

我需要帮助来了解如何解决这个问题。并且这种在父控制器的属性发生变化时重新加载子模型的方法是否是一个好方法，如果不是那么请提出正确的方法。

Answer 1

好的，所以您希望属性在不同的模板中更新。您需要尝试从管理对象（模型）而不是这些对象的属性的角度来考虑 Ember。使用 Ember 的绑定，属性应该会自动更新。您需要考虑使用 store 来管理所述对象。

你在ParentController 中什么都不是。您可以直接在模板中使用来自ParentRoute 的模型，例如

<div>
  {{input value=model.firstName}}
  {{input value=model.lastname}}
</div>
{{#link-to 'parent.child1'}}child1{{/link-to}}
{{#link-to 'parent.child2'}}child2{{/link-to}}
{{outlet}}

然后您的子控制器变得更加简单：

App.Child1Controller = Ember.ObjectController.extend({
  needs: ['ParentController'],
  parentModel: Ember.computed.alias('controllers.ParentController.model')
});

App.Child2Controller = Ember.ObjectController.extend({
  needs: ['ParentController'],
  parentModel: Ember.computed.alias('controllers.ParentController.model')

});

你会像这样在你的模板中使用它们：

<div>
  {{parentModel.firstName}}
</div>