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>

在上面的元素中，我无法绑定事件中的属性。请在这个元素中建议我做错了什么。在同一个元素中，我尝试使用纸张滑块绑定属性，它是工作查找（此代码不包含在代码段中）

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>

聚合物 - window.addEventListener中的“deviceorientation”数据绑定

1 个答案: