Polymer - window.addEventListener 内的数据绑定 'deviceorientation'

Question

请参考下面的聚合物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>

在上面的元素中，我无法绑定事件的属性。请建议我在这个元素中做错了什么。在同一元素中，我尝试将属性与 paper-slider 绑定，它正在工作（代码片段中未包含此代码）

Answer 1

您的代码可能存在多个问题：

{{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>

Polymer - window.addEventListener 内的数据绑定 'deviceorientation'

Polymer - databinding within window.addEventListener for 'deviceorientation'

polymer-2.x