Zurb基金会与EmberJS行动合作

Question

在EmberJS应用程序中，似乎Foundation的下拉插件会干扰/阻止您使用＆＃34;操作＆＃34;在下拉列表中呈现的内容。

例如，这应该可以正常工作，但是＆＃39; componentAction＆＃39;永远不会召唤行动。知道是什么原因造成的吗？

<!-- 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');
});