如何从外面打开Ember Power Select下拉列表?

时间:2017-09-28 13:58:15

标签: ember.js ember-cli ember-addon

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

据我们检查,没有办法触发组件的动作open,从"数据减少,动作增加&#的意义上说,它不会是正确的34;原理。所以,我们需要注册"一些数据属性允许我们通过更改数据属性来触发打开下拉列表。

但也许我们已经监督了某些事情并且有人可以提出解决方案来解决我们从外部打开下拉菜单的要求?

示例:Ember Power Select是较大组件的一部分,例如,较大的div。当用户点击div上的任何位置时,下拉列表会打开。

感谢您的任何意见!

1 个答案:

答案 0 :(得分:0)

您只需将initiallyOpened属性设置为true

此外,如果要使用jquery打开电源选择。您可以在模板中调用ember-power-select,并且可以在component.js中使用这些函数:

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

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

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()));
}