如何在 Polymer 2.x 中正确使用 IronA11yKeysBehavior

Question

我正在尝试使用 class 语法为 Polymer 2.x 创建一个新元素，但现在我无法使用 IronA11yKeysBehavior。我在这里做错了什么？

<link rel="import" href="https://raw-dot-custom-elements.appspot.com/PolymerElements/iron-a11y-keys-behavior/v2.0.0/polymer/polymer.html">
<link rel="import" href="https://raw-dot-custom-elements.appspot.com/PolymerElements/iron-a11y-keys-behavior/v2.0.0/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
<link rel="import" href="https://raw-dot-custom-elements.appspot.com/PolymerElements/paper-input/v2.0.0/paper-input/paper-input.html">

<dom-module id="my-control">
  <template>
    Template Content! Pressing enter should show an alert message. [[result]]
    <paper-input label="Demo Template Input" value="{{result}}"></paper-input>
  </template>
  <script>
    "use strict";
    class MyControl extends Polymer.mixinBehaviors([
      Polymer.IronA11yKeysBehavior
    ], Polymer.Element){
      static get is(){return 'my-control'; }
      static get keyBindings(){
        return {
          'enter': '_updatePressed'
        };
      }
      static get instanceKeyBindings(){
        return {
          'enter': '_updatePressed'
        };
      }
      _updatePressed(event){
        console.log(event.detail);
        this.result = "Enter pressed";
        alert("Enter pressed");
      }
    }
    customElements.define(MyControl.is, MyControl);
  </script>
</dom-module>


<my-control></my-control>

当我使用旧语法时，一切正常。

<link rel="import" href="https://raw-dot-custom-elements.appspot.com/PolymerElements/iron-a11y-keys-behavior/v2.0.0/polymer/polymer.html">
<link rel="import" href="https://raw-dot-custom-elements.appspot.com/PolymerElements/iron-a11y-keys-behavior/v2.0.0/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
<link rel="import" href="https://raw-dot-custom-elements.appspot.com/PolymerElements/paper-input/v2.0.0/paper-input/paper-input.html">

<dom-module id="my-control">
  <template>
    Template Content! [[result]]
    <paper-input label="Demo Template Input" value="{{result}}"></paper-input>
  </template>
  <script>
    "use strict";
    Polymer({
    is: 'my-control',
    behaviors: [
      Polymer.IronA11yKeysBehavior
    ],
    keyBindings: { 'enter': '_updatePressed' },
  _updatePressed: function(event){
        console.log(event.detail);
        this.result = "Enter pressed";
        alert("Enter pressed");
    }
  });
  </script>
</dom-module>
<my-control></my-control>

如何使用新 class 语法的行为？

Answer 1

keyBindings 应该是实例 getter 而不是静态实例。否则，看起来您的代码是正确的。

class MyControl extends Polymer.mixinBehaviors([Polymer. IronA11yKeysBehavior], Polymer.Element) {
  // static get keyBindings() { ... }   // DON'T DO THIS
  get keyBindings() { ... }             // DO THIS
}

这是您更正的代码片段：

<base href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/">
<script src="webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
<link rel="import" href="paper-input/paper-input.html">

<dom-module id="my-control">
  <template>
    Template Content! Pressing enter should show an alert message. [[result]]
    <paper-input label="Demo Template Input" value="{{result}}"></paper-input>
  </template>
  <script>
    "use strict";
    class MyControl extends Polymer.mixinBehaviors([
      Polymer.IronA11yKeysBehavior
    ], Polymer.Element){
      static get is(){return 'my-control'; }
      get keyBindings(){
        return {
          'enter': '_updatePressed'
        };
      }
      static get instanceKeyBindings(){
        return {
          'enter': '_updatePressed'
        };
      }
      _updatePressed(event){
        console.log(event.detail);
        this.result = "Enter pressed";
        alert("Enter pressed");
      }
    }
    customElements.define(MyControl.is, MyControl);
  </script>
</dom-module>


<my-control></my-control>

看起来 IronA11yKeysBehavior 存储库目前只有 legacy demo, but I've translated it to Polymer 2's class based syntax in this Codepen。

如何在 Polymer 2.x 中正确使用 IronA11yKeysBehavior

How to use IronA11yKeysBehavior in Polymer 2.x correctly

javascript

ecmascript-6

polymer

polymer-2.x