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>

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

＆＃39;剪辑＆＃39;尽管在DOM中的输出HTML中显示data-ember-action="1024"，但从未处理过action。

现在，是什么让我感到沮丧。如果我通过删除必要的类和属性来停止该模板作为基础模式，则当我单击“创建剪辑”时，事件会正常触发。按钮。如果我只是将该按钮移到模态之外，也是同样的。

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

我在控制台中完全没有反馈。

Answer 1

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

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

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

不触发Foundation模式中包含的元素的操作

1 个答案: