Ember JS:父路由/控制器如何观察它的子路由/控制器的变化?

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

本文关键字：控制器 路由 变化 观察 何观察 JS Ember      更新时间：2023-09-26

我正在制作一个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>

我会从子节点向父节点发送一个操作，上游的通信总是比下游的更容易(因为父母并不总是有孩子)。

下面的内容:

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,
  ...
});
相关文章：