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

Question

我正在学习Ember并与Emberjs一起编写一个简单的登录应用程序。我有一个登录框组件 - 它处理UI和后端通信。成功登录后，我想将当前用户存储在某处，以便所有控制器都可以访问应用程序中的当前用户对象。我怎样才能做到这一点？我正在使用this.sendAction（'action'）从LoginBoxComponent冒泡事件。事件正在冒泡到LoginController正确（登录控制器的模板调用组件） - 但是因为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');
  },

controller / application.js中的代码

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

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

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

Answer 1

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

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

所以你的行动是冒泡的：登录控制器=＆gt;登录路线=＆gt;申请路线。