如何在 Emberjs 中将事件从内部组件冒泡到应用程序控制器？答案

【问题标题】：How to bubble events from inner components to application controller in Emberjs?如何在 Emberjs 中将事件从内部组件冒泡到应用程序控制器？
【发布时间】：2023-04-01 18:09:03
【问题描述】：

我正在学习 Ember 并使用 Emberjs 编写一个简单的登录应用程序。我有一个登录框组件——它处理 UI 和后端通信。成功登录后，我想将当前用户存储在某处，以便所有控制器都可以访问应用程序中的当前用户对象。我怎样才能做到这一点？我正在使用 this.sendAction('action') 从 LoginBoxComponent 中冒泡事件。事件正确地冒泡到 LoginController（Login Controller 的模板调用组件） - 但是由于 loginController 不在所有控制器的父路径中（我假设 applicationController 是所有控制器的父级 - 如果我错了，请纠正我），我让事件通过不在 LoginController 中处理而冒泡到应用程序控制器。然而，rails 抱怨

错误：没有处理“userLogin”操作。如果你确实处理了动作，此错误可能是由动作返回 true 引起的控制器中的处理程序，导致动作冒泡。

模板/login.hbs

<div class="col-sm-offset-3 col-sm-6">
  {{login-box store=store action="userLogin"}}
</div>

我在 components/login-box.js 中的成功处理程序

  onSuccess: function(post) {
    console.log(post);
    this.sendAction('action');
  },

controllers/application.js 中的代码

  actions: {
    userLogin: function() {
      this.set('currentUser', '123');
      this.transitionTo('index');
    }

但是，如果我在 applicationRouter 中处理此操作，它会得到正确处理 - 我不明白为什么它会跳过应用程序控制器。我不想在应用程序路由器中处理它，因为我无法从那里设置全局 currentUser 对象。

非常感谢任何帮助。谢谢！

【问题讨论】：

标签： javascript ember.js

【解决方案1】：

从组件发送的动作首先到达模板的控制器。

如果控制器没有为该操作实现处理程序，它将冒泡到模板的路由，然后向上路由层次结构。有关此冒泡行为的更多信息，请参阅Action Bubbling。

所以你的操作正在冒泡：登录控制器 => 登录路由 => 应用程序路由。

【讨论】：

啊有道理。那么如何设置一个全局 currentUser 以在 ApplicationRoute 中的所有控制器中使用？我必须使用 controllerFor 并将其设置在 ApplicationController 上吗？如果找不到设置的属性，是否所有控制器都默认在 ApplicationController 中查找？
这个答案是正确的，但它是phased out！我建议 OP 迁移到 1.13 并学习新方法。
@Anish 当动作冒泡到 ApplicationRoute 时，您可以使用 this.controller.set() 在 ApplicationController 上设置属性。
@Anish：“那么我如何设置一个全局 currentUser 以在 ApplicationRoute 中的所有控制器中使用？” - 这取决于，很难用两个词来回答。你可以在这里找到答案guides.emberjs.com/v1.12.0/understanding-ember/…。 “如果找不到设置的属性，是否所有控制器都默认在 ApplicationController 中查找？” - 没有。