Actions not related to items contained in

Question

I have a component template configured as such:

<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>

And this has a related action defined within the component itself. I will not embed this code for brevity.

The clip action is never processed, despite being data-ember-action="1024"displayed in the output HTML in the DOM.

Now that pushed me. If I stopped this template on the Foundation module, removing the necessary classes and properties, the event fires properly when I click the Create Clip button. The same thing if I just move this button beyond the modal.

, ? JS , . , .

.

Answer 1

, , , , rootElement . , , Ember body, , , , .

edit: , Ember , root_element Foundation.

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