处理 GWT 中铁列表的键盘事件？答案

【问题标题】：Handle Keyboard events for iron-list in GWT?处理 GWT 中铁列表的键盘事件？
【发布时间】：2016-02-07 13:04:30
【问题描述】：

我使用来自 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 中将它添加到我的 Iron-list 中。

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

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

public native void print(JavaScriptObject obj) /-{ 控制台.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 库捕获键盘事件？按下回车键时如何接收事件？

【问题讨论】：

你想用铁名单做什么？我可以帮你添加按键事件的处理程序。

标签： javascript html gwt polymer polymer-1.0

【解决方案1】：

回答这个问题

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 捕获键盘事件聚合物 GWT 库？

当像 enter 这样的键是按下了吗？

我可以找到这个 Polymer convention：不打算供外部使用的属性应该带有下划线前缀。

这就是他们没有在JsTypeIronListElement中暴露的原因。您可以使用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()获取元素。

请记住，我还没有测试过这段代码 :)

【讨论】：

很好的答案，但是你能解释一下我最后两个问题之后的最后一部分吗？

【解决方案2】：

如果你想添加关键事件自定义元素（我不知道我是否理解正确的问题）您必须实现 Polymer.IronA11yKeysBehavior 行为，然后使用 keyBindings 原型属性来表示将触发事件的键组合。

<!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

【讨论】：

这就是 JavaScript 解决方案。请查看我的编辑我需要知道它如何与 GWT Vaadin Polymer Elements 一起使用。
我不知道 GWT.. 所以我这样回答也许有人会使用它
当我在 JSNI 中编写代码时，我得到：“具有该名称的类型已注册”。这是因为它已经定义好了。以后可以添加处理程序吗？
还是没有回答我的问题？