Ember with Foundations Dropdown Components

[lmcardle]

I have integrated Foundation into an app and most things work well. However, when I use the dropdown component from Foundation (http://foundation.zurb.com/docs/components/dropdown.html) in an Ember component, Ember begins to stop working.

For example, if I create a component "my-button" which renders a dropdown component, as long as the content within the dropdown are href's the dropdown's content works. But when I change the content within the dropdown to use standard click actions, the actions are never fired. Here is an ember-twiddle example that does not work. http://ember-twiddle.com/9bd863d32b2257663c57

As you can see all the logic is self contained inside of the component. When the rendered dropdown content is clicked, an action "componentAction" should be fired within the component itself. That action in turn should be display an alert. However that action is never fired upon click.

Any idea what would cause embers actions to stop working?

[alexlafroscia]

Which part of your Twiddle doesn't work? It seems like the link that's visible shows and hides the pop-over without issue.

[lmcardle]

After you click on the dropdown, you will see a paragraph of text. Clicking on the paragraph should invoke the action "componentAction" within the component....however it does not. I did figure out the issue though. I needed to replace this:

didInsertElement: function() {
  this.$().foundation();
  },

with this:

didInsertElement: function() {
  this.$(document).foundation();
},

While adding the 'document' within the jQuery selector works, I have no idea why. I should not have to do that should I ... as this.$() should select this whole component?