Question

我正在向用户提供Ember应用程序。该应用程序有一个进度条，在您进行新手入门时会填充动画。我这样做是通过让进度条成为其中更改的各个步骤的父视图。

现在我需要在用户完成新手工作时更新进度条。我的ProgressBarRoute / ProgressBarController是否可以观察其子路由/控制器的变化，以便父视图可以处理更新进度条？

路线：

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

进度条视图，其中包含子步骤：

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

  {{outlet}}
</script>

Answer 1

我会从孩子向父母发送一个动作，上游沟通比下游更容易（由于父母并不总是有孩子）。

这些方面的东西：

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,
  ...
});

Ember JS：父路由/控制器如何观察其子路由/控制器的变化？

1 个答案: