ember.js - 未对 Foundation 模态中包含的元素触发的操作

Question

我有一个组件模板设置如下:

<div id="clipModal" class="reveal-modal medium" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
  <h3>New Clip</h3>

  <p class="margin-top-10">
    <label>Title:</label>
    {{input value=title }}
  </p>

  {{widgets/video-player/project-selector projects=projects action='selectedProjectChanged'}}

  <p>
    <label>Duration</label>
      {{formattedSelectionStart}} - {{formattedSelectionEnd}}
  </p>

  <p>
    <button {{action "clip"}}>Create Clip</button>
  </p>
  <a class="close-reveal-modal" aria-label="Close">&#215;</a>  
</div>

这具有在组件本身中定义的相关操作。为简洁起见，我不会粘贴该代码。

尽管显示 data-ember-action="1024"，但从未处理过“剪辑”操作在 DOM 中的输出 HTML 中。

现在，是什么让我绊倒了。如果我通过删除必要的类和属性来停止该模板成为 Foundation 模式，则当我单击“创建剪辑”按钮时事件会正确触发。如果我只是将该按钮移到模态之外，也是如此。

知道什么可能导致这种情况吗？在该模式中具有内联 vanilla JS 事件的元素可以正常工作，所有 Foundation 事件本身也是如此。只是 Ember 出于任何原因拒绝打球。

我在控制台中绝对没有任何反馈。

Answer 1

是的，经过一番摸索，问题的根源在于我定义了一个自定义 rootElement在我的应用程序实例化中。因此，当 Foundation 插入它的模态 gubbins 时，它会将它们推到 Ember 应用程序之外的 body 中。 ，这显然意味着 Ember 没有观察到这些事件。

编辑:允许您在自己的自定义容器中仍然拥有 Ember 的解决方案是设置 root_element在实例化任何 Foundation 模块时。

Ember.$(document).foundation('reveal', { root_element: $("#someFragment") });