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

Question

我试图在类语法中为 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>

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

Answer 1

keyBindings 应该是实例 getter 而不是静态 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 ，但我已将它翻译成 Polymer 2 的基于 class 的语法 Codepen .