请参考下面的聚合物2.0元素。
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<dom-module id="xxx">
<template>
<style>
:host {
display: block;
};
</style>
<div>sdsds {{alphaValue}}</div>
<div>sdsd [[betaValue]]</div>
<div>sdsd [[gammaValue]]</div>
</template>
<script>
class xxxClass extends Polymer.Element {
static get is() { return 'xxx'; }
static get properties() {
return {
alphaValue:{
type: Number,
value: 0.0
},
betaValue:{
type: Number,
value: 0.0
},
gammaValue:{
type: Number,
value: 0.0
}
};
}
ready(){
super.ready();
}
connectedCallback() {
super.connectedCallback();
window.addEventListener('deviceorientation',this.getSensorData,true);
}
disconnectedCallback() {
super.disconnectedCallback();
window.addEventListener('deviceorientation',this.getSensorData,true);
}
getSensorData() {
this.alphaValue= event.alpha;
this.betaValue = event.beta;
this.gammaValue = event.gamma;
}
}
window.customElements.define(xxxClass .is, xxxClass );
</script>enter code here
</dom-module>
在上面的元素中,我无法绑定事件中的属性。请在这个元素中建议我做错了什么。 在同一个元素中,我尝试使用纸张滑块绑定属性,它是工作查找(此代码不包含在代码段中)
答案 0 :(得分:0)
您的代码可能存在多个问题:
{{alphaValue}}
双向绑定在这种情况下无用,只需像其他[[alphaValue]]
一样使用
在侦听器的回调函数中,您必须绑定上下文。那将是window.addEventListener('deviceorientation', this.getSensorData.bind(this), true);
。如果您在回调函数处理期间没有这样做,则值this.alphaValue
,this.betaValue
和this.gammaValue
将为空。
在您的回调函数中,您错过了该事件的参数。 getSensorData(event)
所以代码看起来像是:
<dom-module id="os-test">
<template>
<div>sdsds {{alphaValue}}</div>
<div>sdsd [[betaValue]]</div>
<div>sdsd [[gammaValue]]</div>
</template>
<script>
class OsTestElement extends Polymer.Element {
static get is() {
return 'os-test';
}
static get properties() {
return {
alphaValue: {
type: Number,
value: 0.0
},
betaValue: {
type: Number,
value: 0.0
},
gammaValue: {
type: Number,
value: 0.0
}
};
}
connectedCallback() {
super.connectedCallback();
if (window.DeviceOrientationEvent) {
console.log("The browser support device orientation..")
window.addEventListener('deviceorientation', this.getSensorData.bind(this), true);
} else {
console.log("The browser doesn't support device orientation..");
}
}
disconnectedCallback() {
super.disconnectedCallback();
window.removeEventListener('deviceorientation', this.getSensorData.bind(this), true);
}
getSensorData(event) {
this.alphaValue = event.alpha;
this.betaValue = event.beta;
this.gammaValue = event.gamma;
}
}
window.customElements.define(OsTestElement.is, OsTestElement);
</script>
</dom-module>