Как открыть выпадающий список Ember Power Select снаружи?

Question

Как следует из заголовка, мы хотели бы открыть выпадающий список Ember Power Select ( http://www.ember-power-select.com/) снаружи, т. Е. Из родительского компонента или шаблона маршрута.

Насколько мы проверили, нет способа вызвать действие open компонента, который, между прочим, не был бы правильным в смысле принципа "данные вниз, действия вверх". Итак, скорее нам нужно "зарегистрировать" некоторый атрибут данных, который позволяет нам запускать раскрывающийся список путем изменения атрибута данных.

Но, может быть, мы что-то наблюдали, и кто-то мог бы предложить решение для нашего требования открыть выпадающий список снаружи?

Пример: Ember Power Select является частью большего компонента, например, большего div, Когда пользователь нажимает на это divоткрывается раскрывающийся список.

Спасибо за любой вклад!

Answer 1

Вам просто нужно установить 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()));
}