我试图在类语法中为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>
如何在新的类语法中使用行为?
发布于 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
的语法。
https://stackoverflow.com/questions/44546357
复制相似问题