Fatal编程技术网
  • javascript/
  • Javascript 聚合事件处理程序 我的目标

Javascript 聚合事件处理程序 我的目标

javascript polymer

Javascript 聚合事件处理程序 我的目标,javascript,polymer,polymer-1.0,Javascript,Polymer,Polymer 1.0,我的目标是在一个聚合物自定义元素中实现Google GeogoArt API，以创建一个可选的美国地图 我期望看到的是。。。 ，我希望看到所选项目记录到控制台 我所看到的。。。 相反，我看到以下错误： Cannot read property 'getSelection' of undefined. Cannot read property 'draw' of undefined at x-element.Polymer._drawRegionsMap 尝试的解决方案 下。和。（每一条中的注

我的目标是在一个聚合物自定义元素中实现Google GeogoArt API，以创建一个可选的美国地图

我期望看到的是。。。 ，我希望看到所选项目记录到控制台

我所看到的。。。 相反，我看到以下错误：

Cannot read property 'getSelection' of undefined.

Cannot read property 'draw' of undefined at x-element.Polymer._drawRegionsMap
尝试的解决方案 下。和。（每一条中的注释都反映了另一种尝试。）

在我尝试的解决方案中，我尝试将
chart
变量作为属性持久化。但该操作失败，出现以下错误：

Cannot read property 'getSelection' of undefined.

Cannot read property 'draw' of undefined at x-element.Polymer._drawRegionsMap
我怎样才能让它工作

原始代码--http://jsbin.com/zaqutegima/edit?html，控制台，输出 
<!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>

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


#地球艺术{
宽度：100%；
最大高度：500px；
}
显示
（功能（）{
聚合物({
是‘x元素’，
特性：{
项目：{
类型：数组，
值：函数（）{
返回[['State'，Select']，['Alaska'，0]，'Alabama'，0]，'Arkansas'，0]，'亚利桑那'，0]，'California'，0]，'Colorado'，0]，'Delaware'，0]，'Florida'，0]，'Georgia'，0]，'aidaho'，0]，'伊利诺斯州'，'0]，'印第安纳州'，'Kansas'，0]，'肯塔基州'，'路易斯安那州'，'0]，'Massachusetts'，0]，'，[马里兰州，0]，“缅因州”，0]，“密歇根州”，0]，“明尼苏达州”，0]，“密苏里州”，0]，“密西西比州”，0]，“蒙大拿州”，0]，“北卡罗来纳州”，0]，“北达科他州”，0]，“内布拉斯加州”，0]，“新罕布什尔州”，0]，“新泽西州”，0]，“新墨西哥州”，0]，“内华达州”，0]，“纽约州”，“0]，“俄亥俄州”，“0]，“俄克拉何马州”，“0]，“俄勒冈州”，0]，“宾夕法尼亚州”，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]，]；
}
},
选项：{
类型：对象，
通知：正确，
价值：{
地区:"美国",，
显示模式：“区域”，
决议：“各省”，
图例：“无”，
}
},
/** /
图表：{
类型：对象，
通知：正确，
计算：''u computeChart（）'，
},
/**/
},
/** /
_computeChart:函数（）{
var out=new google.visualization.geograpart（this.$.geograpart）；
google.visualization.events.addListener（out'select'，this.\u selectHandler）；
返回；
},
/**/
获取数据（）{
返回google.visualization.arrayToDataTable（this.items）；
},
/**/
获取图表（）{
var out=new google.visualization.geograpart（this.$.geograpart）；
google.visualization.events.addListener（out'select'，this.\u selectHandler）；
返回；
},
/**/
就绪：函数（）{
google.charts.load（'current'{
“包”：[“地球艺术”]
});
google.charts.setOnLoadCallback（this._DrawRegionMap.bind（this））；
},
_DrawRegionMap: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）；
},
});
})();
尝试的解决方案--http://jsbin.com/migefasuxe/edit?html，控制台，输出 
<!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>

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


#地球艺术{
宽度：100%；
最大高度：500px；
}
显示
（功能（）{
聚合物({
是‘x元素’，
特性：{
项目：{
类型：数组，
值：函数（）{
返回[['State'，Select']，['Alaska'，0]，'Alabama'，0]，'Arkansas'，0]，'亚利桑那'，0]，'California'，0]，'Colorado'，0]，'Delaware'，0]，'Florida'，0]，'Georgia'，0]，'aidaho'，0]，'伊利诺斯州'，'0]，'印第安纳州'，'Kansas'，0]，'肯塔基州'，'路易斯安那州'，'0]，'Massachusetts'，0]，'，[马里兰州，0]，“缅因州”，0]，“密歇根州”，0]，“明尼苏达州”，0]，“密苏里州”，0]，“密西西比州”，0]，“蒙大拿州”，0]，“北卡罗来纳州”，0]，“北达科他州”，0]，“内布拉斯加州”，0]，“新罕布什尔州”，0]，“新泽西州”，0]，“新墨西哥州”，0]，“内华达州”，0]，“纽约州”，“0]，“俄亥俄州”，“0]，“俄克拉何马州”，“0]，“俄勒冈州”，0]，“宾夕法尼亚州”，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]，]；
}
},
选项：{
类型：对象，
通知：正确，
价值：{
地区:"美国",，
显示模式：“区域”，
决议：“各省”，
图例：“无”，
}
},
/**/
图表：{
类型：对象，
通知：正确，
计算：''u computeChart（）'，
},
/**/
},
_computeChart:函数（）{
var out=new google.visualization.geograpart（this.$.geograpart）；
google.visualization.events.addListener（out'select'，this.\u selectHandler）；
返回；
},
/**/
获取数据（）{
返回google.visualization.arrayToDataTable（this.items）；
},
/** /
获取图表（）{
var out=new google.visualization.geograpart（this.$.geograpart）；
google.visualization.events.addListener（out'select'，this.\u selectHandler）；
返回；
},
/**/
就绪：函数（）{
google.charts.load（'current'{
“包”：[“地球艺术”]
});
google.charts.setOnLoadCallback（this._DrawRegionMap.bind（this））；
},
_DrawRegionMap:function（）{
this.chart.draw（this.data，this.options）；
},
_selectHandler:function（）{
var selectedItem=this.chart.getSelection（）；
console.log（selectedItem）；
},
_show:function（）