[英]Handle Keyboard events for iron-list in GWT?
我使用谷歌聚合物的铁列表 。
<iron-list items="[[data]]" as="item">
<template>
<div tabindex$="[[tabIndex]]">
Name: [[item.name]]
</div>
</template>
</iron-list>
我知道你可以使用Polymer.IronA11yKeysBehavior但是即使是这个例子,我也不知道如何将它添加到我的铁列表中。
使用Vaadin Polymer GWT lib 。 在这个lib你有
IronList list;
list.setKeyBindings(???); // don't know how to use this function
list.setKeyEventTarget(????); // don't know how to use this function
当我检查键绑定的当前值时,我定义了一个print函数来将变量记录到控制台:
public native void print(JavaScriptObject obj)/ - {console.log(obj); } - /;
然后我打印当前值:
print(list.getKeyBindings());
结果是:
Object {up: "_didMoveUp", down: "_didMoveDown", enter: "_didEnter"}
似乎已经定义了一些键绑定,但我不知道在哪里找到函数_didMoveUp
, _didMoveDown
和_didEnter
。
当我做
print(list.getKeyEventTarget());
我明白了:
<iron-list class="fit x-scope iron-list-0" tabindex="1" style="overflow: auto;">
</iron-list>
如何使用Vaadin Polymer GWT lib设置捕获键盘事件的处理程序? 当按下诸如enter之类的键时,如何收到事件?
回答这个问题
list.setKeyBindings(???); //不知道如何使用这个功能
根据com/vaadin/polymer/vaadin-gwt-polymer-elements/1.2.3.1-SNAPSHOT/vaadin-gwt-polymer-elements-1.2.3.1-20160201.114641-2.jar!/com/vaadin/polymer/public/bower_components/iron-list/iron-list.html:292
keyBindings
应具有这种结构的object
:
{
'up': '_didMoveUp',
'down': '_didMoveDown',
'enter': '_didEnter'
}
构造这样的对象,你可以使用以下:
new JSONObject() {{
put("up", new JSONString("_didMoveUp"));
put("down", new JSONString("_didMoveDown"));
put("enter", new JSONString("_didEnter"));
}}.getJavaScriptObject();
我不知道在哪里找到函数_didMoveUp,_didMoveDown和_didEnter
它们可以在这里找到: com/vaadin/polymer/vaadin-gwt-polymer-elements/1.2.3.1-SNAPSHOT/vaadin-gwt-polymer-elements-1.2.3.1-20160201.114641-2.jar!/com/vaadin/polymer/public/bower_components/iron-list/iron-list.html:1504
这是摘录
_didMoveUp: function() {
this._focusPhysicalItem(Math.max(0, this._focusedIndex - 1));
},
_didMoveDown: function() {
this._focusPhysicalItem(Math.min(this._virtualCount, this._focusedIndex + 1));
},
_didEnter: function(e) {
// focus the currently focused physical item
this._focusPhysicalItem(this._focusedIndex);
// toggle selection
this._selectionHandler(e.detail.keyboardEvent);
}
如何使用Vaadin Polymer GWT lib设置捕获键盘事件的处理程序?
当按下诸如enter之类的键时,如何收到事件?
我可以找到这个Polymer 约定 :不打算外部使用的属性应该以下划线为前缀。
这就是为什么它们没有在JsType
IronListElement
中JsType
IronListElement
。 您可以使用JSNI
更改此功能。 我觉得像这样:
private native static void changeDidMoveUp(IronListElement ironList) /*-{
var _old = ironList._didMoveUp;
ironList._didMoveUp = function() {
console.log('tracking');
_old();
}
}-*/;
或添加一个新的
IronListElement element ...
com.vaadin.polymer.elemental.Function<Void, Event> func = event -> {
logger.debug(event.detail);
...
return null;
};
private native static void addUpdatePressed(IronListElement ironList, Function func) /*-{
ironList._updatePressed = func;
}-*/;
{
addUpdatePressed(element, func);
element.addOwnKeyBinding("a", "_updatePressed");
element.addOwnKeyBinding("shift+a alt+a", "_updatePressed");
element.addOwnKeyBinding("shift+tab shift+space", "_updatePressed");
}
应该管用。 您可以从IronList#getPolymerElement()
获取元素。
请记住,我还没有测试过这段代码:)
如果你想添加关键事件自定义元素(我不知道我是否理解正确的问题)你必须实现Polymer.IronA11yKeysBehavior行为,然后使用keyBindings
prototype属性来表示什么组合的键将触发事件触发。
<!DOCTYPE html> <head> <meta charset="utf-8"> <base href="https://polygit.org/components/"> <script src="webcomponentsjs/webcomponents.js"></script> <link rel="import" href="iron-a11y-keys-behavior/iron-a11y-keys-behavior.html"> <link rel="import" href="iron-list/iron-list.html"> <body> <dom-module id="x-elem"> <template> <iron-list items="[[data]]" as="item"> <template> <div> pressed: [[item]] </div> </template> </template> </dom-module> <script> Polymer({ is: 'x-elem', behaviors: [ Polymer.IronA11yKeysBehavior ], properties: { preventDefault:{type:Boolean,value:true}, data:{value:[]}, keyEventTarget: { type: Object, value: function() { return document.body; } } }, keyBindings: { '* pageup pagedown left right down up home end space enter @ ~ " $ ? ! \\\\ + : # backspace': '_handler', 'a': '_handler', 'shift+a alt+a': '_handler', 'shift+tab shift+space': '_handler' }, _handler: function(event) { if (this.preventDefault) { // try to set true/false and press shit+a and press up or down event.preventDefault(); } console.log(event.detail.combo); this.push('data',event.detail.combo); } }); </script> <x-elem></x-elem> </body> </html>
我希望能回答你的问题,如何听取密钥。 _handler函数接收一个事件,以便您可以查看事件的详细信息并获取目标(如果某些事情是焦点)。
event.detail.target
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.