Zurb Foundation與EmberJS操作的下拉菜單

Question

在EmberJS應用程序中，似乎Foundation的下拉插件會干擾/阻止您在下拉列表中呈現的內容中使用「操作」。

例如，這應該可以正常工作，但是'componentAction'動作永遠不會被調用。任何想法可能導致這種情況？

<!-- application.hbs --> 
{{my-dropdown}} 

<!-- my-component.hbs --> 
<a data-dropdown="drop2" aria-controls="drop2" aria-expanded="false">Has Content Dropdown</a> 
<div id="drop2" data-dropdown-content class="f-dropdown content" aria-hidden="true" tabindex="-1"> 
    <p {{action "componentAction"}}>Some text that people will think is awesome! Some text that people will think is awesome! Some text that people will think is awesome!</p> 
</div> 



// my-component.js 
import Ember from 'ember'; 
import layout from './template'; 

export default Ember.Component.extend({ 
    layout, 

    didInsertElement() { 
    this._super(...arguments); 
    Ember.run.scheduleOnce('afterRender', this, function() { 
     this.$().foundation('dropdown', 'reflow'); 
    }); 
    }, 

    action: { 
    componentAction() { 
     console.log('component action fired'); 
    } 
    } 
}); 

Answer 1

這裏的問題是我需要將'document'傳遞給jQuery選擇器。

Ember.run.scheduleOnce('afterRender', this, function() { 
    this.$(document).foundation('dropdown', 'reflow'); 
});