Observer 在 Polymer 2.x 中没有响应 <paper-input>
Observer not responding to <paper-input> in Polymer 2.x
我想通过在 <paper-input>
字段中输入文本来触发观察者。
在邮政编码字段中输入文本时,我希望看到输入的文本记录到控制台。相反,我在控制台中没有看到任何内容。
我做错了什么?
http://jsbin.com/xahobojixe/1/edit?html,console,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<base href="//polygit.org/polymer+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer-element.html">
<link rel="import" href="paper-input/paper-input.html">
</head>
<body>
<dom-module id="my-el">
<template>
<paper-input label="simple character counter" char-counter value="{{zipCode}}"></paper-input>
[[zipCode]]
</template>
<script>
class MyEl extends Polymer.Element {
static get is() {
return 'my-el';
}
static get properties() {
/**/
return {
properties: {
zipCode: {
type: String,
notify: true,
observer: '_zipCodeChanged',
},
},
};
}
constructor() {
super();
}
/**/
ready() {
super.ready();
}
_zipCodeChanged(s) {
console.log('zip-code', s);
console.log('zip-code-this', this.zipCode);
}
}
window.customElements.define(MyEl.is, MyEl);
</script>
</dom-module>
<my-el></my-el>
</body>
</html>
您的 properties
getter 看起来不正确,因为它包含一个名为 properties
的 属性。 getter 应该是:
static get properties() {
return {
zipCode: {
type: String,
notify: true,
observer: '_zipCodeChanged',
},
}
}
我想通过在 <paper-input>
字段中输入文本来触发观察者。
在邮政编码字段中输入文本时,我希望看到输入的文本记录到控制台。相反,我在控制台中没有看到任何内容。
我做错了什么?
http://jsbin.com/xahobojixe/1/edit?html,console,output<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<base href="//polygit.org/polymer+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer-element.html">
<link rel="import" href="paper-input/paper-input.html">
</head>
<body>
<dom-module id="my-el">
<template>
<paper-input label="simple character counter" char-counter value="{{zipCode}}"></paper-input>
[[zipCode]]
</template>
<script>
class MyEl extends Polymer.Element {
static get is() {
return 'my-el';
}
static get properties() {
/**/
return {
properties: {
zipCode: {
type: String,
notify: true,
observer: '_zipCodeChanged',
},
},
};
}
constructor() {
super();
}
/**/
ready() {
super.ready();
}
_zipCodeChanged(s) {
console.log('zip-code', s);
console.log('zip-code-this', this.zipCode);
}
}
window.customElements.define(MyEl.is, MyEl);
</script>
</dom-module>
<my-el></my-el>
</body>
</html>
您的 properties
getter 看起来不正确,因为它包含一个名为 properties
的 属性。 getter 应该是:
static get properties() {
return {
zipCode: {
type: String,
notify: true,
observer: '_zipCodeChanged',
},
}
}