Ember.js：更新父模板属性

Question

各位，我有一个关于更改父模板中的属性的简单问题。 我写的代码如下：

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

此路由器创建以下路由：

• 父母
• 父级索引
• parent.child1
• parent.child2
• parent.child3

以下是我的模板（简化版）

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

<script type="text/x-handlebars" data-template-name="parent">
  <h1>{{title}}</h1>

  Common html

  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="parent/index">
  Parent specific content
</script>

<script type="text/x-handlebars" data-template-name="parent/child1">
  Child 1 specific content
</script>

<script type="text/x-handlebars" data-template-name="parent/child2">
  Child 2 specific content
</script>

<script type="text/x-handlebars" data-template-name="parent/child3">
  Child 3 specific content
</script>

这是我的控制器

App.ParentController = Ember.Controller.extend({
  title: 'Parent Title'
});

App.ParentIndexController = Ember.Controller.extend({
  title: 'Parent Index Title'
});

App.Child1Controller = Ember.Controller.extend({
  title: 'Child 1 Title'
});

App.Child2Controller = Ember.Controller.extend({
  title: 'Child 2 Title'
});

App.Child3Controller = Ember.Controller.extend({
  title: 'Child 3 Title'
});

当我在子控制器中时，如何更新 template="parent" 中的 {{title}} 属性？ 我已经尝试过这样的事情

App.Child3Controller = Ember.Controller.extend({
  needs: ['parent'],
    init: function() {
    this.get('controllers.parent').set('title', 'Child 3 Title');
  }
});

但我没有更新父模板。那么我该如何实现呢？

Answer 1

好的，在您发表评论后编辑我的答案，您面临的问题是来自Child3Controller 的init 没有在您需要的时候被调用，所以要让它工作，您应该在您的parent.child3 路线中进行setupController钩子：

App.ParentChild3Route = Ember.Route.extend({
  setupController: function(controller, model) {
    // the Ember.run.later is not necessary and is only to simulate a delay 
    // so you can actually see the title change, it would be actually
    // just fine to call this.controllerFor('parent').set('title', 'Child 3 Title');
    // directly when the setupController hook is invoked
    Ember.run.later(this, function() {
      this.controllerFor('parent').set('title', 'Child 3 Title');
    }, 1500);
  }
});

我还从index 路由重定向到parent.child3 路由以使setupController 钩子真正触发，但这也可能通过简单地以任何其他方式导航到parent.child3 路由来发生：

App.IndexRoute = Ember.Route.extend({
  afterModel: function() {
    this.transitionTo('parent.child3');
  }
});

总而言之，在控制器中改变值应该在控制器对应路由的setupController钩子中完成。

我尝试用一​​个简单的demo 模拟这个，看看。

希望对你有帮助。

Answer 2

谢谢大家的回复！你们给了我一个想法，它解决了我的问题 :) 在这里查看jsbin.com/AhOT/3 如你所见，我采取了另一种方法来解决它;)