Zurb Foundation Dropdown 与 EmberJS Actions

Question

在 EmberJS 应用程序中，Foundation 的下拉插件似乎会干扰/阻止您在下拉列表中呈现的内容中使用 "actions"。

例如，这应该可以正常工作，但是永远不会调用 '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');
});

Zurb Foundation Dropdown 与 EmberJS Actions

Zurb Foundation Dropdown with EmberJS Actions

ember.js

zurb-foundation

ember-cli