Polymer - databinding within window.addEventListener for 'deviceorientation' - polymer-2.x

Question

Please refer below polymer 2.0 element.
<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>
In the above element, i am not able to bind the properties from the event. Please suggest what i am doing wrong in this element.
In the same element i tried binding property with paper-slider , it is working find ( this code is not included in the snippet )

Answer 1

There is maybe multiple issue on your code :
{{alphaValue}} The two way binding is not useful in that case, just use like the other [[alphaValue]]
On the callback function for the listener, you have to bind the context. That will be window.addEventListener('deviceorientation', this.getSensorData.bind(this), true);. If you don't do that during you callback function process, the values this.alphaValue, this.betaValue and this.gammaValue will be null.
On your callback function you missed a parameter for the event. getSensorData(event)
So the code will look like to :
<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>