javascript - Ember.js:更新父模板属性

Question

大家好，我有一个关于更改父模板中的属性的简单问题。我写的代码如下:

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

此路由器创建以下路由:

• 家长
• parent.index
• 父子1
• 父子2
• 父子3

以下是我的模板(已简化)

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

这是我的 Controller

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

当我在子 Controller 中时，如何更新 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 Hook 中完成它:

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 Hook 真正触发，但这可能也可以通过以任何其他方式简单地导航到 parent.child3 路由来实现:

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

因此总而言之，更改 Controller 中的值应该在 Controller 相应路由的 setupController Hook 中完成。

我试着用一个简单的 demo 来模拟这个，看看。

希望对您有所帮助。