Ember.js -打开模式的动作不会弹出组件

Ember.js - Open modal action won't bubble out of component

本文关键字：组件 js 模式 Ember      更新时间：2023-09-26

我遵循Ember.js的使用模态对话框，并在ApplicationRoute中放置一个动作处理程序。这很好，直到我尝试在组件的模板中使用相同的操作，在这种情况下，它不做任何以下错误在控制台:Uncaught Error: Assertion Failed: The目标for <appkit@component:user-info::ember451> (49.5) does not have a发送method。

这是一个JSBin演示我的问题。注意，在索引模板中指定的操作调用了模态，而在组件中指定的操作却不调用。JSBin的要点如下:

<<p> 索引模板/strong> 
<!-- this creates the modal successfully -->
<button {{action "openModal" "modal-login"}}>open a modal (not in a component)</button>
<!-- this component has the same button as above in code, but clicking the button doesnt work -->
{{user-info}}

user-info组件模板

<button {{action "openModal" "modal-login"}}>open a modal(in a component)</button>

我已经找到了一个修复这个，但它是非常黑客和添加了很多代码到我的组件。在组件声明中，我复制了'openModal'动作，并让它通过组件上的注册动作发送一个动作，如下所示:

你需要把动作发送给路由器动作。像这样:

App.UserInfoComponent = Ember.Component.extend({
  actions: {
        openModal: function(modalName) {
          console.log(modalName);      this.sendAction('openModal',modalName);
            }
        }
});

下面是一个jsbin的工作解决方案:http://jsbin.com/fijujikape/1/edit?html, js、控制台、输出

您的修复是预期的行为，在组件模板中触发的操作被设计为由组件处理。必要时，您可以像指南示例那样重定向操作。

如果你想让你的组件动作以控制器/路由约定流为目标，你必须把动作设置到组件本身，而不是在组件子视图中。

 {{user-info tagName='button' 
   action='openModal' 
   context='modal-login' }}
http://jsbin.com/takatoyi/2/edit

相关文章：