我的目标
我的目标是 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/