不触发 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>

并且它具有在组件本身内定义的关联操作。为简洁起见，我不会粘贴该代码。

尽管在 DOM 中的输出 HTML 中显示 data-ember-action="1024"，但从未处理 'clip' 操作。

现在，是什么让我绊倒了。如果我通过删除必要的类和属性来停止该模板成为 Foundation 模态，则当我单击 'Create clip' 按钮时事件会正确触发。如果我只是将该按钮移到模态之外，则同上。

知道是什么原因造成的吗？在该模式中具有内联 vanilla JS 事件的元素可以正常工作，所有 Foundation 事件本身也是如此。只是 Ember 以任何理由拒绝打球。

我在控制台中完全没有得到任何反馈。

Answer 1

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

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

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

不触发 Foundation 模态中包含的元素的动作

Actions not firing on elements contained in a Foundation modal

ember.js

zurb-foundation