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

How to bubble events from inner components to application controller in Emberjs?

本文关键字：组件 控制器 应用程序 内部 Emberjs 事件      更新时间：2023-09-26

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

错误：未处理操作"用户登录"。如果您确实处理了 操作，此错误可能是由从操作返回 true 引起的 控制器中的处理程序，导致操作冒泡。

templates/login.hbs

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

我在组件/登录框中的成功处理程序.js

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

控制器/应用程序中的代码.js

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

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

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

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

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

因此，您的操作正在冒泡：登录控制器 => 登录路由 =>应用程序路由。

相关文章：