如何從外面打開Ember Power Select的下拉菜單？

正如標題所示，我們希望從外部打開Ember Power Select（http://www.ember-power-select.com/）的下拉列表，即從父組件或路徑的模板中打開。如何從外面打開Ember Power Select的下拉菜單？

據我們已經檢查，沒有辦法觸發該組件的動作open，在「數據下降，行動了」原則的意義上，btw不會是正確的。因此，我們需要「註冊」一些數據屬性，以便通過更改數據屬性來觸發打開下拉菜單。

但是，也許我們已經監督了一些事情，有人可以提出一個解決方案，以便我們從外部打開下拉菜單？

示例：Ember Power Select是更大組件的一部分，例如，一些更大的組件div。當用戶點擊div的任何地方時，下拉列表將打開。

感謝您的任何意見！

來源

2017-09-28 Patrick Hammer

您只需要將initiallyOpened屬性設置爲true即可。

此外，如果你想打開電源選擇通過使用jQuery。您可以致電燼功率選在你的模板，你可以在你的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())); 
}

來源

2017-09-28 14:07:59

艾哈邁德，謝謝你的答案。像你這樣的綜合事件在這種情況下很好地工作。在你的答案中，你混合了兩種方法，一種是在IE（'document.createEvent'）中工作的舊方法，另一種是使用'MouseEvent'的新方法）。也許你可以在你的例子中做得更清楚。其他讀者參考：https：//developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events –

@PatrickHammer是的，你是對的。當我在我的項目中尋找解決方案時。我發現可以使用較新的MouseEvent在本頁面中打開觸發器https://github.com/cibernox/ember-power-select/issues/517 –

@PatrickHammer現在我記得，document.createEvent適用於觸發鼠標用於選擇餘燼動力選擇選項的事件。我會相應地給出答案。 –

如何從外面打開Ember Power Select的下拉菜單？

回答

相關問題