聚合物1.x：预加载元素属性 [英] Polymer 1.x: Pre-loading element attributes
本文介绍了聚合物1.x：预加载元素属性的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用选定的属性的 ['科罗拉多州'，南达科他州] 。
I am trying to load my element with a predefined value for the selected attribute of ['Colorado', 'South Dakota'].
我希望看到该页面加载了所有美国州的大纲。在控制台中没有错误。而科罗拉多州和南达科他州的状态预先选定并且是蓝色的。
I expect to see the page load a map with an outline of all the U.S. states. With no errors in the console. And the states of Colorado and South Dakota pre-selected and colored blue.
相反，我看到一个空白页（根本没有地图）和一组错误控制台从以下开始：
Instead, I see a blank page (no map at all) and a set of errors in the console beginning with the following:
聚合物::属性：无法将JSON解码为JSON
以下步骤将重新创建问题：
The following steps will recreate the problem:
- 打开此jsBin 。
- 请注意，地图在输出窗格中正确加载。 （当选择和取消选择状态时，可以正常工作。）
- 向下滚动到页面底部到
< x-element>标签 - 删除
选择前面的属性，所以完整的属性如下：x字符selected =['Colorado'，'South Dakota']。 - 注意地图消失，不再正确加载，上述错误出现在控制台中。
- 替换刚被删除的
x，并注意到地图加载并正常工作。
- Open this jsBin.
- Notice the map loads properly in the output pane. (And works properly when states are selected and de-selected.)
- Scroll down to the bottom of the page to the
<x-element>tag. - Delete the
xcharacter in front of theselectedattribute so the complete attribute reads:selected="['Colorado', 'South Dakota']". - Notice the map disappeared, no longer loads properly and the errors described above appear in the console.
- Replace the
xyou just deleted and notice the map loads and works properly again.
问题
在这？是什么导致问题，什么可以解决？如果可以，请包含一个工作的jsBin解决方案示例。
Question
What could be going on here? What is causing the problem and what can fix it? Please include a working jsBin example of your solution if you can.
<!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%;
max-height: 300px;
}
</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,
},
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.*)'
],
ready: function() {
var a = [['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]];
this.set('items', a);
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 str = e.path[0].textContent.split('Select')[0].trim(), // e.g. 'Ohio'
temp = [],
ar = this.items,
index = this.itemIndices[str], // e.g. 35
i = ar.length;
this.set('items.' + index + '.1', ar[index][1] ? 0 : 1);
while(i---1){
/** /
if(str === ar[i][0]){
this.set('items.' + i + '.1', ar[i][1] ? 0 : 1);
//this.items[i][1] = ar[i][1] ? 0 : 1;
}
/**/
if(ar[i][1]){
temp.push(ar[i][0]);
}
}
temp.sort();
this.set('selected', temp);
this._drawChart();
//console.log(this.selected);
},
_drawChart: function() {
this.$.geochart._dataTable=this.$.geochart._createDataTable(this.items);
this.$.geochart._chartObject.draw(this.$.geochart._dataTable,
this.$.geochart.options);
},
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 = [],
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);
}
},
_selectedChanged: function(ar) {
var a = ar.base,
i = a.length;
this._doAll('some');
while(i--){
var index = this.itemIndices[a[i]];
this.set('items.' + index + '.1', 1);
}
this._drawChart();
this.fire('us-map-select',this.selected)
console.log(this.selected);
},
_computeOptions: function() {
return {
region: 'US',
displayMode: 'regions',
resolution: 'provinces',
legend: 'none',
defaultColor: '#F5F5F5',
colorAxis: {
colors: ['#F5F5F5', this.color],
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"
xselected="['Colorado', 'South Dakota']" ></x-element>
</body>
</html>
推荐答案
我认为应该是
selected='["Colorado", "South Dakota"]'
JSON需要双引号。
JSON needs double quotes.
这篇关于聚合物1.x：预加载元素属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
