處理GWT中鐵列表的鍵盤事件？

Question

我使用谷歌聚合物的鐵列表。

<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之類的鍵時，如何收到事件？

Answer 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 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()獲取元素。

請記住，我還沒有測試過這段代碼:)

Answer 2

如果你想添加關鍵事件自定義元素（我不知道我是否理解正確的問題）你必須實現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

處理GWT中鐵列表的鍵盤事件？

問題描述

2 個解決方案

解決方案1
2 已采納 2016-02-19 14:35:33

解決方案2
-1 2016-02-14 03:23:28

處理GWT中鐵列表的鍵盤事件？

問題描述

2 個解決方案

解決方案1 2 已采納 2016-02-19 14:35:33

解決方案2 -1 2016-02-14 03:23:28

解決方案1
2 已采納 2016-02-19 14:35:33

解決方案2
-1 2016-02-14 03:23:28