如何从外部打开Ember Power Select的下拉菜单? [英] How to open the dropdown of Ember Power Select from outside?

问题描述

正如标题所述，我们要打开Ember Power Select的下拉列表( http://www.ember-power-select.com/)从外部(即从父组件或路由模板).

As the title says, we would like to open the dropdown of the Ember Power Select (http://www.ember-power-select.com/) from outside, i.e., from a parent component or the route's template.

就我们所检查的而言，没有办法触发组件的动作open，顺便说一句，从数据减少，动作增加"的原则来看，这是不正确的.因此，我们需要注册"一些数据属性，该属性允许我们通过更改数据属性来触发打开下拉列表的操作.

As far as we have checked, there is no way to trigger the action open of the component, which btw wouldn't be correct in the sense of "data down, actions up" principle. So, rather we need to "register" some data attribute that allows us to trigger to open the dropdown by altering the data attribute.

但是也许我们已经监督了一些事情，有人可以提出一个解决方案来满足我们从外部打开下拉菜单的要求吗?

But maybe we have overseen something and somebody could propose a solution to our requirement to open the dropdown from outside?

示例:Ember Power Select是较大组件(例如，较大的div)的一部分.当用户点击该div上的任意位置时，下拉列表就会打开.

Example: Ember Power Select is part of a bigger component, e.g., some bigger div. When the user clicks wherever on that div, the dropdown opens.

感谢您的任何输入！

推荐答案

您只需要将initiallyOpened属性设置为true.

You just need to set initiallyOpened attribute to true.

此外，如果要打开电源，请使用jquery选择.您可以在模板中调用ember-power-select，也可以在component.js中使用以下功能:

Besides, if you want to open power select by using jquery. You can call ember-power-select in your template and You can use these functions in your component.js:

function touchToEmberPowerSelect(identifier) {
  Ember.run(() => this.$('.' + identifier).get(0).dispatchEvent(new 
  MouseEvent('mousedown')));
}

仅供参考，打开下拉列表后，以下代码可用于选择代码中的电源选择选项:

And just for information, the code below can be used for selecting power select options in code after the dropdown is opened:

function createMouseEvent(){

let mouseevent = document.createEvent('MouseEvents');

mouseevent.initMouseEvent(
'mouseup',
true,
false,
window,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null);
return mouseevent;
}

function selectOptionWithDisplayTextOfEmberPowerSelect(identifier, displayText) 
{

  let matchedElements = $(".ember-power-select-option").filter(function() {
    return ($(this).text().trim() === displayText);
  });

  if(matchedElements.length < 1){
    Ember.assert("There is no element with display text");
  }
  else if(matchedElements.length > 1){
    Ember.assert("There are more than one elements with display text");
  }

  Ember.run(() => matchedElements[0].dispatchEvent(createMouseEvent()));
}

这篇关于如何从外部打开Ember Power Select的下拉菜单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！