如何从外部打开 Ember 电源 Select 的下拉菜单?
How to open the dropdown of Ember Power Select from outside?
正如标题所说,我们想从外部打开 Ember 电源 Select (http://www.ember-power-select.com/) 的下拉菜单,即从 parent 组件或路线的模板。
据我们检查,没有办法触发组件的动作 open
,顺便说一下,这在 "data down, actions up" 原则的意义上是不正确的。因此,我们需要 "register" 一些数据属性,允许我们通过更改数据属性来触发打开下拉列表。
但也许我们已经监督了一些事情,有人可以针对我们从外部打开下拉菜单的要求提出解决方案?
示例:Ember 功率 Select 是更大组件的一部分,例如,更大的组件 div
。当用户点击 div
上的任意位置时,下拉菜单打开。
感谢任何意见!
您只需将 initiallyOpened
属性设置为 true
。
此外,如果您想使用jquery打开电源select。您可以在模板中调用 ember-power-select 并且可以在 component.js:
中使用这些函数
function touchToEmberPowerSelect(identifier) {
Ember.run(() => this.$('.' + identifier).get(0).dispatchEvent(new
MouseEvent('mousedown')));
}
仅供参考,打开下拉菜单后,下面的代码可用于 selecting power select 代码中的选项:
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 电源 Select (http://www.ember-power-select.com/) 的下拉菜单,即从 parent 组件或路线的模板。
据我们检查,没有办法触发组件的动作 open
,顺便说一下,这在 "data down, actions up" 原则的意义上是不正确的。因此,我们需要 "register" 一些数据属性,允许我们通过更改数据属性来触发打开下拉列表。
但也许我们已经监督了一些事情,有人可以针对我们从外部打开下拉菜单的要求提出解决方案?
示例:Ember 功率 Select 是更大组件的一部分,例如,更大的组件 div
。当用户点击 div
上的任意位置时,下拉菜单打开。
感谢任何意见!
您只需将 initiallyOpened
属性设置为 true
。
此外,如果您想使用jquery打开电源select。您可以在模板中调用 ember-power-select 并且可以在 component.js:
中使用这些函数function touchToEmberPowerSelect(identifier) {
Ember.run(() => this.$('.' + identifier).get(0).dispatchEvent(new
MouseEvent('mousedown')));
}
仅供参考,打开下拉菜单后,下面的代码可用于 selecting power select 代码中的选项:
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()));
}