聚合物事件處理程序
[英]Polymer event handler
問題描述
我的目標
我的目標是將此jsBin中顯示的演示包裝在 Polymer 自定義元素中，以實現Google GeoChart API以創建可選的美國地圖。
我希望看到...
當我打開此jsBin並單擊state時 ，我希望看到所選項目已記錄到控制台。
我實際上看到的是...
相反，我看到以下錯誤：
Cannot read property 'getSelection' of undefined.
嘗試的解決方案
在下面， 我發布了原始代碼 。 而我嘗試的解決方案 。 （每個中的注釋反映了另一個嘗試。）
在嘗試的解決方案中，我嘗試將chart變量作為屬性保留。 但這失敗並顯示以下錯誤：
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>
嘗試的解決方案-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>
2 個解決方案
解決方案1
1 2016-02-02 13:48:49
也許您應該使用異步功能在附加事件上執行此操作，將ready函數更改為
attached: function(){
this.async(function() {
google.charts.load('current', {'packages': ['geochart']});
google.charts.setOnLoadCallback(this._drawRegionsMap.bind(this));
});
(..)
解決方案2
1 已采納 2016-02-02 13:53:03
未定義的錯誤是由於缺少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;
},
事件處理程序未在聚合物就緒內部觸發：function（）
[英]event handler is not getting triggered inside polymer ready:function()
如何忽略該屬性的已更改事件處理程序中Polymer元素的默認屬性的初始覆蓋？
[英]How can I ignore the initial override of a default attribute on a Polymer element within the changed event handler for that attribute?
Polymer 1.0-綁定事件處理程序，而無需創建自定義元素
[英]Polymer 1.0- bind a event handler without having to make a custom element
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.