Question

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

＆＃13;

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

＆＃13;

<!--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>

＆＃13;

所以上面代码的问题是，当我在父控制器的索引中时，每当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>

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

1 个答案: