聚合物事件处理程序

Polymer event handler

本文关键字：程序 事件处理 聚合物      更新时间：2023-09-26

我的目标

我的目标是将本 jsBin 中显示的演示包装在 Polymer 自定义元素中，以实现 Google GeoChart API 以创建可选择的美国地图。

我期待看到的...

当我打开这个jsBin并单击一个状态时，我希望看到所选项目记录到控制台。

我实际看到的...

相反，我看到以下错误：

Cannot read property 'getSelection' of undefined.

尝试的解决方案

下面，我发布了我的原始代码。还有我尝试的解决方案。（每个注释都反映了其他尝试。

在我尝试的解决方案中，我尝试将chart变量保留为属性。但是失败了，并出现以下错误：

Cannot read property 'draw' of undefined at x-element.Polymer._drawRegionsMap

我如何让它工作？

原始代码 -- http://jsbin.com/zaqutegima/edit?html,console,output 
<!doctype html>
<head>
  <meta charset="utf-8">
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
</head>
<body>
<dom-module id="x-element">
<template>
  <style>
    #geochart {
      width: 100%;
      max-height: 500px;
    }
  </style>
  <button on-tap="_show">Show</button>
  <div id="geochart"></div>
</template>
<script>
  (function(){
    Polymer({
      is: 'x-element',
      properties: {
        items: {
          type: Array,
          value: function() {
            return [['State', 'Select'], ['Alaska', 0], ['Alabama', 0], ['Arkansas', 0], ['Arizona', 0], ['California', 0], ['Colorado', 0], ['Connecticut', 0], ['Delaware', 0], ['Florida', 0], ['Georgia', 0], ['Hawaii', 0], ['Iowa', 0], ['Idaho', 0], ['Illinois', 0], ['Indiana', 0], ['Kansas', 0], ['Kentucky', 0], ['Louisiana', 0], ['Massachusetts', 0], ['Maryland', 0], ['Maine', 0], ['Michigan', 0], ['Minnesota', 0], ['Missouri', 0], ['Mississippi', 0], ['Montana', 0], ['North Carolina', 0], ['North Dakota', 0], ['Nebraska', 0], ['New Hampshire', 0], ['New Jersey', 0], ['New Mexico', 0], ['Nevada', 0], ['New York', 0], ['Ohio', 0], ['Oklahoma', 0], ['Oregon', 0], ['Pennsylvania', 0], ['Rhode Island', 0], ['South Carolina', 0], ['South Dakota', 0], ['Tennessee', 0], ['Texas', 0], ['Utah', 0], ['Virginia', 0], ['Vermont', 0], ['Washington', 0], ['Wisconsin', 0], ['West Virginia', 0], ['Wyoming', 0],];
          }
        },
        options: {
          type: Object,
          notify: true,
          value: {
            region: 'US',
            displayMode: 'regions',
            resolution: 'provinces',
            legend: 'none',
          }
        },
        /** /
        chart: {
          type: Object,
          notify: true,
          computed: '_computeChart()',
        },
        /**/
      },
      /** /
      _computeChart: function() {
        var out = new google.visualization.GeoChart(this.$.geochart);
        google.visualization.events.addListener(out, 'select', this._selectHandler);
        return out;
      },
      /**/
      get data() {
        return google.visualization.arrayToDataTable(this.items);
      },
       /**/
      get chart() {
        var out = new google.visualization.GeoChart(this.$.geochart);
        google.visualization.events.addListener(out, 'select', this._selectHandler);
        return out;
      },
      /**/
      ready: function(){
        google.charts.load('current', {
          'packages': ['geochart']
        });
        google.charts.setOnLoadCallback(this._drawRegionsMap.bind(this));
      },
      _drawRegionsMap: function() {
        this.chart.draw(this.data, this.options);
      },
      _selectHandler: function() {
        var selectedItem = this.chart.getSelection();
        console.log(selectedItem);
      },
      _show: function() {
        //console.log(this.items);
        //console.log(this.data);
        console.log(this.chart);
      },

    });
  })();
</script>
</dom-module>
<x-element></x-element>
</body>
尝试的解决方案 -- http://jsbin.com/migefasuxe/edit?html,console,output 
<!doctype html>
<head>
  <meta charset="utf-8">
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
</head>
<body>
<dom-module id="x-element">
<template>
  <style>
    #geochart {
      width: 100%;
      max-height: 500px;
    }
  </style>
  <button on-tap="_show">Show</button>
  <div id="geochart"></div>
</template>
<script>
  (function(){
    Polymer({
      is: 'x-element',
      properties: {
        items: {
          type: Array,
          value: function() {
            return [['State', 'Select'], ['Alaska', 0], ['Alabama', 0], ['Arkansas', 0], ['Arizona', 0], ['California', 0], ['Colorado', 0], ['Connecticut', 0], ['Delaware', 0], ['Florida', 0], ['Georgia', 0], ['Hawaii', 0], ['Iowa', 0], ['Idaho', 0], ['Illinois', 0], ['Indiana', 0], ['Kansas', 0], ['Kentucky', 0], ['Louisiana', 0], ['Massachusetts', 0], ['Maryland', 0], ['Maine', 0], ['Michigan', 0], ['Minnesota', 0], ['Missouri', 0], ['Mississippi', 0], ['Montana', 0], ['North Carolina', 0], ['North Dakota', 0], ['Nebraska', 0], ['New Hampshire', 0], ['New Jersey', 0], ['New Mexico', 0], ['Nevada', 0], ['New York', 0], ['Ohio', 0], ['Oklahoma', 0], ['Oregon', 0], ['Pennsylvania', 0], ['Rhode Island', 0], ['South Carolina', 0], ['South Dakota', 0], ['Tennessee', 0], ['Texas', 0], ['Utah', 0], ['Virginia', 0], ['Vermont', 0], ['Washington', 0], ['Wisconsin', 0], ['West Virginia', 0], ['Wyoming', 0],];
          }
        },
        options: {
          type: Object,
          notify: true,
          value: {
            region: 'US',
            displayMode: 'regions',
            resolution: 'provinces',
            legend: 'none',
          }
        },
        /**/
        chart: {
          type: Object,
          notify: true,
          computed: '_computeChart()',
        },
        /**/
      },
      _computeChart: function() {
        var out = new google.visualization.GeoChart(this.$.geochart);
        google.visualization.events.addListener(out, 'select', this._selectHandler);
        return out;
      },
      /**/
      get data() {
        return google.visualization.arrayToDataTable(this.items);
      },
       /** /
      get chart() {
        var out = new google.visualization.GeoChart(this.$.geochart);
        google.visualization.events.addListener(out, 'select', this._selectHandler);
        return out;
      },
      /**/
      ready: function(){
        google.charts.load('current', {
          'packages': ['geochart']
        });
        google.charts.setOnLoadCallback(this._drawRegionsMap.bind(this));
      },
      _drawRegionsMap: function() {
        this.chart.draw(this.data, this.options);
      },
      _selectHandler: function() {
        var selectedItem = this.chart.getSelection();
        console.log(selectedItem);
      },
      _show: function() {
        //console.log(this.items);
        //console.log(this.data);
        console.log(this.chart);
      },

    });
  })();
</script>
</dom-module>
<x-element></x-element>
</body>

未定义的错误是由于缺少this._selectHandler的.bind(this)。因此，图表的正确获取器变为：

  get chart() {
    var out = new google.visualization.GeoChart(this.$.geochart);
    google.visualization.events.addListener(out, 'select', this._selectHandler.bind(this));
    return out;
  },
<</div> div class="answers">

也许您应该使用异步函数在附加的事件上执行此操作 将就绪函数更改为

attached: function(){
    this.async(function() {
        google.charts.load('current', {'packages': ['geochart']});
        google.charts.setOnLoadCallback(this._drawRegionsMap.bind(this));
    });
(..)
相关文章：