javascript - polymer 事件处理器

标签 javascript polymer polymer-1.0

我的目标

我的目标是 wrap the demo shown in this jsBin在 Polymer 自定义元素中实现 Google GeoChart API 以创建可选择的美国 map 。

我希望看到的...

When I open this jsBin and click on a state ,我希望看到所选项目记录到控制台。

我实际看到的...

相反,我看到以下错误:

Cannot read property 'getSelection' of undefined.

尝试的解决方案

下面,I have posted my original code .和 my attempted solution . (每个评论都反射(reflect)了另一个尝试。)

在我尝试的解决方案中,我尝试将 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)。因此,图表的正确 setter/getter 变为:

  get chart() {
    var out = new google.visualization.GeoChart(this.$.geochart);
    google.visualization.events.addListener(out, 'select', this._selectHandler.bind(this));
    return out;
  },

关于javascript - polymer 事件处理器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35154552/

相关文章:

javascript - jQuery 在复杂的 HTML 字符串中评估 JavaScript

javascript - 直接用 jQuery/Javascript 触发按钮点击 moon.Button 或 moon.IconButton

javascript - D3 - 在某些图层上禁用/重新启用鼠标悬停

polymer - 哪个 polymer 表

javascript - polymer 核心标签和核心复选框动态

javascript - 在对象中使用 Polymer push 方法

polymer - document.querySelector 与 Polymer.dom(this.$).querySelector

javascript - 当前两个字母是元音时,Pig Latin 算法不起作用

polymer 使用 this.set() 计算和设置属性值不起作用

javascript - polymer - 应用程序存储 : Remove entry and update storage