Polymer 1.x：定義“ google”導入
[英]Polymer 1.x: Defining “google” import
問題描述
在這種jsBin ，我要聲明具有的價值預加載我的元素['Colorado', 'South Dakota']的selected屬性。
當我打開jsBin時 ，我希望看到以下內容：
- successfully一個成功加載的頁面。
- ✅美國的輪廓圖
- ✅
selected變量的左上角顯示為Colorado,South Dakota。 - Colorado科羅拉多州和南達科他州已預先選擇，顏色為藍色。
- the控制台中沒有錯誤。
相反，我實際上看到以下內容：
- successfully一個成功加載的頁面。
- ✅美國的輪廓圖
- ✅
selected變量的左上角顯示為Colorado,South Dakota。 - Colorado 未預先選擇科羅拉多州和南達科他州或藍色。
- console以下控制台錯誤：
google is not defined
題
我如何才能在關鍵位置定義google的價值？
我將問題歸結為以下幾行代碼 。
http://jsbin.com/zomejajibe/1/edit?html，控制台，輸出 _drawChart: function() { console.log('A'); // Successfully logs to console // The key is to get "google" defined at the following line var dataTable = this.$.geochart._createDataTable(this.items); // "google" is not defined??? console.log('dataTable: '); // Does not successfully log because crashes above console.log(dataTable); this.$.geochart._chartObject.draw(dataTable, this.$.geochart.options); },
2 個解決方案
解決方案1
1 已采納 2016-02-11 19:00:24
因此，您有一個問題，即在元素就緒之前，選擇更改觸發了觸發器。
我在函數_selectedChanged上添加了10毫秒的超時，因此它將超時推送到事件循環的結尾。 您可以將其更改為0毫秒。
解決方案2
0 2016-02-12 00:54:29
具體來說，@ Alon添加了以下功能：
http://jsbin.com/hulusijaje/1/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">
<link href="google-chart/google-chart.html" rel="import"> </head>
<body>
<dom-module id="x-element"> <template>
<style>
google-chart {
width: 100%;
}
</style>
<button on-tap="_show">Show</button>
<div>[[selected]]</div>
<google-chart
id="geochart"
type="geo"
options="{{options}}"
data="{{items}}"
xon-google-chart-select="_onGoogleChartSelect"></google-chart>
</template>
<script>
(function() {
Polymer({
is: 'x-element',
/** /
* Fired when user selects chart item.
*
* @event us-map-select
* @param {object} detail Alpabetized array of selected state names.
/**/
properties: {
selected: {
type: Array,
notify: true,
//reflectToAttribute: true,
},
items: {
type: Array,
notify: true,
reflectToAttribute: true,
value: function() {
return [
['State', 'Select'],
['Alabama', 0],
['Alaska', 0],
['Arizona', 0],
['Arkansas', 0],
['California', 0],
['Colorado', 0],
['Connecticut', 0],
['Delaware', 0],
['Florida', 0],
['Georgia', 0],
['Hawaii', 0],
['Idaho', 0],
['Illinois', 0],
['Indiana', 0],
['Iowa', 0],
['Kansas', 0],
['Kentucky', 0],
['Louisiana', 0],
['Maine', 0],
['Maryland', 0],
['Massachusetts', 0],
['Michigan', 0],
['Minnesota', 0],
['Mississippi', 0],
['Missouri', 0],
['Montana', 0],
['Nebraska', 0],
['Nevada', 0],
['New Hampshire', 0],
['New Jersey', 0],
['New Mexico', 0],
['New York', 0],
['North Carolina', 0],
['North Dakota', 0],
['Ohio', 0],
['Oklahoma', 0],
['Oregon', 0],
['Pennsylvania', 0],
['Rhode Island', 0],
['South Carolina', 0],
['South Dakota', 0],
['Tennessee', 0],
['Texas', 0],
['Utah', 0],
['Vermont', 0],
['Virginia', 0],
['Washington', 0],
['West Virginia', 0],
['Wisconsin', 0],
['Wyoming', 0]
];
},
},
color: {
type: String, // '#455A64'
value: function() {
return 'blue';
}
},
options: {
type: Object,
notify: true,
reflectToAttribute: true,
computed: '_computeOptions(color)',
},
itemIndices: {
type: Object,
computed: '_computeItemIndices(items)',
},
},
observers: [
// '_selectedChanged(selected.*)',
'try(selected.*)'
//'_drawChart(items.*, options)',
],
ready: function() {
var _this = this;
this.$.geochart.addEventListener('google-chart-select', function(e) {
this._onGoogleChartSelect(e)
}.bind(_this));
},
_computeItemIndices: function(a) {
var out = {},
i = a.length;
while (i--) {
out[a[i][0]] = i;
}
return out;
},
_onGoogleChartSelect: function(e) {
var s = e.path[0].textContent.split('Select')[0].trim(), // e.g. 'Ohio'
temp = [],
a = this.items,
index = this.itemIndices[s], // e.g. 35
i = a.length;
this.set('items.' + index + '.1', a[index][1] ? 0 : 1);
while (i-- - 1) {
/** /
if(s === a[i][0]){
this.set('items.' + i + '.1', a[i][1] ? 0 : 1);
//this.items[i][1] = a[i][1] ? 0 : 1;
}
/**/
if (a[i][1]) {
temp.push(a[i][0]);
}
}
temp.sort();
this.set('selected', temp);
this._drawChart();
//console.log(this.selected);
},
/**/
_redrawChart: function() {
var j = 1, // iterations
s = 1, // delay in seconds
_this = this;
while (j--) {
try {
// console.log(j);
_this._drawChart();
//return;
} catch (e) {
// console.log(e.message);
setTimeout(function() {
//console.log(j);
console.log(_this.selected); // undefined
}, (s * 1000));
_this._drawChart();
}
}
},
/**/
_drawChart: function() {
console.log('A'); // Successfully logs to console
// The key is to get "google" defined at the following line
try {
var dataTable = this.$.geochart._createDataTable(this.items); // "google" is not defined???
console.log('dataTable: '); // Does not successfully log because crashes above
// console.log(dataTable);
this.$.geochart._chartObject.draw(dataTable, this.$.geochart.options);
} catch (e) {}
},
doAll: function(verb) {
verb = verb || 'clear'; // verb: 'clear'(default)|'select'
verb = (verb === 'select') ? 'select' : 'clear';
this._doAll(verb);
this._drawChart();
},
_doAll: function(verb) {
var resetSelect = (verb && verb === 'some') ? false : true;
verb = verb || 'clear'; // verb: 'clear'(default)|'select'|'some'
verb = (verb === 'select') ? 'select' : 'clear';
var temp = [];
var items = this.items,
i = items.length;
switch (verb) {
case 'select':
while (i-- - 1) {
items[i][1] = 1;
temp.push(items[i][0]);
}
break;
case 'clear':
while (i-- - 1) {
items[i][1] = 0;
}
break;
default:
break;
}
this.set('items', items);
if (resetSelect) {
temp.sort();
this.set('selected', temp);
}
},
try: function(e) {
var self = this;
setTimeout(function() {
self._selectedChanged(e)
}.bind(self), 100)
}, ////
_selectedChanged: function(e, k) {
console.log('selected');
if (k === undefined) {
console.log(e);
//// return
} else {
console.log(k);
}
var a = e.base,
i = a.length;
this._doAll('some');
while (i--) {
var index = this.itemIndices[a[i]];
this.set('items.' + index + '.1', 1);
}
this._redrawChart();
this.fire('us-map-select', this.selected);
// console.log(this.selected);//
// console.log(this.items);
},
_computeOptions: function(s) {
return {
region: 'US',
displayMode: 'regions',
resolution: 'provinces',
legend: 'none',
defaultColor: 'white',
colorAxis: {
colors: ['#E0E0E0', s],
minValue: 0,
maxValue: 1,
}
}
},
_show: function() {
//this.set('selected', ['Ohio', 'New Mexico']);
this.doAll();
//console.log(this.itemIndices);
},
});
})();
</script>
</dom-module>
<x-element xcolor="#455A64" selected='["Colorado", "South Dakota"]'></x-element>
</body>
</html>
該解決方案的完整代碼如下：
http://jsbin.com/hulusijaje/1/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"> <link href="google-chart/google-chart.html" rel="import"> </head> <body> <dom-module id="x-element"> <template> <style> google-chart { width: 100%; } </style> <button on-tap="_show">Show</button> <div>[[selected]]</div> <google-chart id="geochart" type="geo" options="{{options}}" data="{{items}}" xon-google-chart-select="_onGoogleChartSelect"></google-chart> </template> <script> (function() { Polymer({ is: 'x-element', /** / * Fired when user selects chart item. * * @event us-map-select * @param {object} detail Alpabetized array of selected state names. /**/ properties: { selected: { type: Array, notify: true, //reflectToAttribute: true, }, items: { type: Array, notify: true, reflectToAttribute: true, value: function() { return [ ['State', 'Select'], ['Alabama', 0], ['Alaska', 0], ['Arizona', 0], ['Arkansas', 0], ['California', 0], ['Colorado', 0], ['Connecticut', 0], ['Delaware', 0], ['Florida', 0], ['Georgia', 0], ['Hawaii', 0], ['Idaho', 0], ['Illinois', 0], ['Indiana', 0], ['Iowa', 0], ['Kansas', 0], ['Kentucky', 0], ['Louisiana', 0], ['Maine', 0], ['Maryland', 0], ['Massachusetts', 0], ['Michigan', 0], ['Minnesota', 0], ['Mississippi', 0], ['Missouri', 0], ['Montana', 0], ['Nebraska', 0], ['Nevada', 0], ['New Hampshire', 0], ['New Jersey', 0], ['New Mexico', 0], ['New York', 0], ['North Carolina', 0], ['North Dakota', 0], ['Ohio', 0], ['Oklahoma', 0], ['Oregon', 0], ['Pennsylvania', 0], ['Rhode Island', 0], ['South Carolina', 0], ['South Dakota', 0], ['Tennessee', 0], ['Texas', 0], ['Utah', 0], ['Vermont', 0], ['Virginia', 0], ['Washington', 0], ['West Virginia', 0], ['Wisconsin', 0], ['Wyoming', 0] ]; }, }, color: { type: String, // '#455A64' value: function() { return 'blue'; } }, options: { type: Object, notify: true, reflectToAttribute: true, computed: '_computeOptions(color)', }, itemIndices: { type: Object, computed: '_computeItemIndices(items)', }, }, observers: [ // '_selectedChanged(selected.*)', 'try(selected.*)' //'_drawChart(items.*, options)', ], ready: function() { var _this = this; this.$.geochart.addEventListener('google-chart-select', function(e) { this._onGoogleChartSelect(e) }.bind(_this)); }, _computeItemIndices: function(a) { var out = {}, i = a.length; while (i--) { out[a[i][0]] = i; } return out; }, _onGoogleChartSelect: function(e) { var s = e.path[0].textContent.split('Select')[0].trim(), // eg 'Ohio' temp = [], a = this.items, index = this.itemIndices[s], // eg 35 i = a.length; this.set('items.' + index + '.1', a[index][1] ? 0 : 1); while (i-- - 1) { /** / if(s === a[i][0]){ this.set('items.' + i + '.1', a[i][1] ? 0 : 1); //this.items[i][1] = a[i][1] ? 0 : 1; } /**/ if (a[i][1]) { temp.push(a[i][0]); } } temp.sort(); this.set('selected', temp); this._drawChart(); //console.log(this.selected); }, /**/ _redrawChart: function() { var j = 1, // iterations s = 1, // delay in seconds _this = this; while (j--) { try { // console.log(j); _this._drawChart(); //return; } catch (e) { // console.log(e.message); setTimeout(function() { //console.log(j); console.log(_this.selected); // undefined }, (s * 1000)); _this._drawChart(); } } }, /**/ _drawChart: function() { console.log('A'); // Successfully logs to console // The key is to get "google" defined at the following line try { var dataTable = this.$.geochart._createDataTable(this.items); // "google" is not defined??? console.log('dataTable: '); // Does not successfully log because crashes above // console.log(dataTable); this.$.geochart._chartObject.draw(dataTable, this.$.geochart.options); } catch (e) {} }, doAll: function(verb) { verb = verb || 'clear'; // verb: 'clear'(default)|'select' verb = (verb === 'select') ? 'select' : 'clear'; this._doAll(verb); this._drawChart(); }, _doAll: function(verb) { var resetSelect = (verb && verb === 'some') ? false : true; verb = verb || 'clear'; // verb: 'clear'(default)|'select'|'some' verb = (verb === 'select') ? 'select' : 'clear'; var temp = []; var items = this.items, i = items.length; switch (verb) { case 'select': while (i-- - 1) { items[i][1] = 1; temp.push(items[i][0]); } break; case 'clear': while (i-- - 1) { items[i][1] = 0; } break; default: break; } this.set('items', items); if (resetSelect) { temp.sort(); this.set('selected', temp); } }, try: function(e) { var self = this; setTimeout(function() { self._selectedChanged(e) }.bind(self), 100) }, //// _selectedChanged: function(e, k) { console.log('selected'); if (k === undefined) { console.log(e); //// return } else { console.log(k); } var a = e.base, i = a.length; this._doAll('some'); while (i--) { var index = this.itemIndices[a[i]]; this.set('items.' + index + '.1', 1); } this._redrawChart(); this.fire('us-map-select', this.selected); // console.log(this.selected);// // console.log(this.items); }, _computeOptions: function(s) { return { region: 'US', displayMode: 'regions', resolution: 'provinces', legend: 'none', defaultColor: 'white', colorAxis: { colors: ['#E0E0E0', s], minValue: 0, maxValue: 1, } } }, _show: function() { //this.set('selected', ['Ohio', 'New Mexico']); this.doAll(); //console.log(this.itemIndices); }, }); })(); </script> </dom-module> <x-element xcolor="#455A64" selected='["Colorado", "South Dakota"]'></x-element> </body> </html>
聚合物1.x：觀察者
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.