JavaScript – 处理GWT中铁列表的键盘事件？

我从Google polymer使用 iron-list.

<iron-list items="[[data]]" as="item">
  <template>
    <div tabindex$="[[tabIndex]]">
      Name: [[item.name]]
    </div>
  </template>
</iron-list>

我可以使用Polymer.IronA11yKeysBehavior,但即使在example我也不知道如何将它添加到JavaScript到我的铁列表.

使用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

当我检查键绑定的当前值时,我定义了一个打印函数来将变量记录到控制台：

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(???); // 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应该有这样的结构的对象：

{
      '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更改此功能.我认为这样的smth：

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中铁列表的键盘事件？

解决方法

相关文章