【发布时间】：2016-02-07 20:35:59
【问题描述】：
我想在<google-chart> geo map element shown in this jsBin 中选择状态。
当我选择一个状态时，我希望它会改变颜色（变为深蓝绿色），但它会保持相同的颜色（浅灰色）。
按照以下步骤重现问题：
- Open this jsBin。
- 在
dom-module><script>>properties>items>value部分中，将数组['Alabama', 0]更改为['Alabama', 1]。 - 请注意，阿拉巴马州的颜色从浅灰色变为深蓝绿色。
- 将鼠标悬停在阿拉巴马州。
- 请注意，对于阿拉巴马州，
Select变量的值是1（对于所有其他州，0）。 - 将数组的值返回给
['Alabama', 0]。 - 注意上一步证明当手动改变
items属性时，生成geochart的代码的行为符合预期。 - 这就是麻烦的开始......
- 点击阿拉巴马州。
- 在控制台中，注意
items[1]数组的值为['Alabama', 1]。 - 注意
Select的值是0（与我们在上面手动更改的情况不同）。
这可能是什么问题？
我不确定but perhaps the solution involves properly implementing this advice？
在处理由
dom-repeat模板实例生成的事件时，您经常希望将触发事件的元素映射到生成该项目的模型数据。
但是在这种情况下如何实施该解决方案？或者这就是解决方案？
解决办法是什么？请显示它在 jsBin 中工作。
http://jsbin.com/pilotazifa/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%;
max-height: 300px;
}
</style>
<button on-tap="_show">Show</button>
<google-chart
id="geochart"
type="geo"
options={{options}}
data={{items}}
on-google-chart-select="_onGoogleChartSelect"
></google-chart>
</template>
<script>
(function(){
Polymer({
is: 'x-element',
properties: {
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], ['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,
reflectToAttribute: true,
value: function() {
return {
region: 'US',
displayMode: 'regions',
resolution: 'provinces',
legend: 'none',
defaultColor: '#F5F5F5',
colorAxis: {
colors: ['#F5F5F5', '#455A64'],
minValue: 0,
maxValue: 1,
}
}
}
},
},
_onGoogleChartSelect: function(e) {
var str = e.path[0].textContent.split('Select')[0].trim(),
ar = this.items,
i = ar.length;
while(i---1){
if(str === ar[i][0]){
this.set('items.' + i + '.1', ar[i][1] ? 0 : 1);
}
}
console.log(this.items);
},
_show: function() {
console.log(this.items);
},
});
})();
</script>
</dom-module>
<x-element></x-element>
</body>
</html>
【问题讨论】：
标签： data-binding polymer polymer-1.0