javascript - Ember JS : How can a parent route/controller observe its child route/controller changing?

Question

我正在为现有用户制作一个 Ember 应用程序。该应用程序有一个进度条，当您完成入门过程时，进度条会填充动画。我通过让进度条成为其中更改的各个步骤的父 View 来实现此目的。

现在我需要在用户完成入门时更新进度栏。有没有办法让我的 ProgressBarRoute/ProgressBarController 可以观察其子路由/ Controller 的变化，以便父 View 可以处理更新进度条？

路线:

App.Router.map(function() {
    this.resource('progressBar', function() {
        this.resource('pickApps'),
        this.resource('pickNetworks');
        this.resource('docs');
    });
});

进度条 View ，带有子步骤的导出:

<script type="text/x-handlebars" id="progressBar">
  <section class="progress">
    {{!-- Progress bar here --}}
  </section>

  {{outlet}}
</script>

Answer 1

我会从 child 向 parent 发送一个操作，上游通信总是比下游更容易(因为 parent 并不总是有 child )。

大致如下:

App.ParentController = Em.ObjectController.extend({
  actions:{
    newStep: function(step){

    }
  }
});


App.ChildController = Em.ObjectController.extend({
  someMethod: function(){
    this.parentController.send('newStep', 7); // or whatever
  }
});

无需重复逻辑，您可以将其设置在基本路由中，并让每个资源扩展该路由。

App.BaseStepRoute = Em.Route.extend({

  setupController: function(controller, model){
    this._super(controller, model);
    var step = this.get('step'),
        progressController = this.controllerFor('progressBar');

    progressBar.send('newStep', step);
  }
});

App.PickAppsRoute = App.BaseStepRoute({
  step = 1,
  ...
});