如何从外部打开和关闭 Ember 电源 Select

Question

我知道，但不完整。我想从外部打开和关闭下拉菜单。

我可以在单击我的包装器组件时调度一个 mousedown 事件，因此 ember-power-select 触发器打开！。但是如果我再次点击它不会关闭。更准确地说，它会快速关闭并再次打开。

我的假设是组件正在侦听 blur 事件以关闭，然后 mousedown 再次到达并打开触发器。

有没有人设法让它工作？或替代品？？我迷路了:)

感谢您的帮助！

wrapper-component.js 

  didInsertElement() {

    this._super(...arguments);
    this.element.addEventListener('mousedown', (event) => {
      event.stopPropagation();
      const eventedElement = this.element.querySelector('.ember-power-select-trigger');
      const mouseDownEvent = new MouseEvent('mousedown');
      eventedElement.dispatchEvent(mouseDownEvent);
    });

  },

Answer 1

根据文档，与 trigger/component 交互的唯一方法是通过 ember-power 的子组件、块和操作中提供的只读 API -select 组件。

由于您已经可以打开触发器，因此您可以将 API 缓存在组件（或路由控制器）中定义的 onchange 事件操作中，并在其中呈现 ember -功率-select:

渲染组件的地方只需向 onopen:

提供一个动作

{{#ember-power-select
  options=options
  selected=selectedOption
  onchange=(action "someAction")
  onopen=(action "cacheAPI")
  as |option|}}
  {{option}}
{{/ember-power-select}}

在呈现它的组件或控制器中：

actions: {

  cacheAPI(options) {
    if (this.powerSelectAPI) return;

    this.set('powerSelectAPI', options);

    // if you just want the actions:
    // this.set('powerSelectAPI', options.actions);
  }

}

然后就可以open/close通过API触发：

this.get('powerSelectAPI').actions.close();

Answer 2

RegisterAPI 是解决方案。来自文档：

The function that will be called when the component is instantiated and also when any state changes inside the component, and receives a publicAPI object that the user can use to control the select from the outside using the actions in it.

@action
registerAPI(emberPowerSelect) {
  if (!this.emberPowerSelect) {
    this.emberPowerSelect = emberPowerSelect;
  }
}
    
@action
toggle(state) {
  if (state) {
    this.emberPowerSelect.actions.open();
  } else {
    this.emberPowerSelect.actions.close();
  }
}

如何从外部打开和关闭 Ember 电源 Select

How to open and close Ember Power Select from outside

javascript

events

dom

ember.js

ember-power-select