我使用 iron-list来自谷歌 polymer 。
<iron-list items="[[data]]" as="item">
<template>
<div tabindex$="[[tabIndex]]">
Name: [[item.name]]
</div>
</template>
</iron-list>
我知道你可以使用 Polymer.IronA11yKeysBehavior但即使是 example我不知道如何用 JavaScript 将它添加到我的 iron 列表中。
使用 Vaadin Polymer GWT lib .在这个库中你有
IronList list;
list.setKeyBindings(???); // don't know how to use this function
list.setKeyEventTarget(????); // don't know how to use this function
当我检查键绑定(bind)的当前值时,我定义了一个打印函数来将变量记录到控制台:
public native void print(JavaScriptObject obj)/-{ 控制台日志(对象); }-/;
然后我打印当前值:
print(list.getKeyBindings());
结果是:
Object {up: "_didMoveUp", down: "_didMoveDown", enter: "_didEnter"}
似乎已经定义了一些键绑定(bind),但我不知道在哪里可以找到函数 _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(???); // don't know how to use this function
根据 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();
I have no idea where I find the functions _didMoveUp, _didMoveDown and _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);
}
How can I set up a handler for capturing keyboard events using Vaadin Polymer GWT lib?
How can I receive an event when keys like enter are pressed?
我可以找到这个 polymer convention : 不供外部使用的属性应使用下划线作为前缀。
这就是为什么它们没有在 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()
获取元素。
请记住,我还没有测试过这段代码:)
关于javascript - 在 GWT 中处理 iron-list 的键盘事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35253827/