如何在Polmerd2.x中正确使用IronA11yKeysBehavior
如何在Polmerd2.x中正确使用IronA11yKeysBehavior
提问于 2017-06-14 21:33:35
我试图在类语法中为Polayer2.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>
如何在新的类语法中使用行为？
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-06-15 02:30:05
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，但是我已经在这个Codepen中将它翻译成了聚合物2的基于class的语法。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44546357
复制相关文章
相似问题