Polymer 1.x：数据绑定

Question

我想 select 状态 <google-chart> geo map element shown in this jsBin。

当我 select 一个状态时，我希望它会改变颜色（变成深蓝绿色），但它会保持相同的颜色（浅灰色）。

按照以下步骤重现问题：

Open this jsBin.
在 dom-module > <script> > properties > items > value 部分，将数组 ['Alabama', 0] 更改为 ['Alabama', 1].
请注意阿拉巴马州的颜色从浅灰色变为深蓝绿色。
将鼠标悬停在阿拉巴马州。
请注意，对于阿拉巴马州，Select 变量的值为 1（对于所有其他州，值为 0）。
Return数组的值改为['Alabama', 0].
注意上一步证明生成 geochart 的代码在items 属性手动变异
麻烦从这里开始...
单击阿拉巴马州。
在控制台中，注意 items[1] 数组的值为 ['Alabama', 1]。
注意 Select 值为 0（与我们在上面手动更改它时的情况不同）。

这可能是什么问题？

我不确定but perhaps the solution involves properly implementing this advice？

When handling events generated by a dom-repeat template instance, you frequently want to map the element firing the event to the model data that generated that item.

但是在这种情况下如何实施该解决方案呢？或者这甚至是解决方案？

解决方法是什么？请展示它在 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>

Answer 1

你必须在一段时间后最后添加到函数_onGoogleChartSelect。它再次生成数据并绘制图表。

this.$.geochart._dataTable=this.$.geochart._createDataTable(this.items);
this.$.geochart._chartObject.draw( this.$.geochart._dataTable, this.$.geochart.options);

你也可以使用

  this.items[i]= ...

而不是

  // this  will fire event every time and I think that in this case you dont need it.
  this.set(...)

因为您的 google-图表要求使用 ajax 的数据，所以数据不具有约束力。所以解决方案是将数据插入到绘制图表的函数中。

http://jsbin.com/doxivotoko/1/edit?html,console,output

Answer 2

@Alon的解决方案全文如下：

http://jsbin.com/redaqezare/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%;
          max-height: 300px;
        }
      </style>
      <google-chart
        id="geochart"
        type="geo"
        options={{options}}
        data={{items}}       
      ></google-chart>
    </template>

    <script>
      (function(){
        Polymer({
          is: 'x-element',
          ready:function(){
            this.items=[['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]];
            var _this=this; 
            this.$.geochart.addEventListener('google-chart-select',function(e){this._onGoogleChartSelect(e)}.bind(_this));
          },
          properties: {
            items: {
              type: Array,
              notify: true,
              reflectToAttribute: true
            },
            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.items[i][1]= ar[i][1] ? 0 : 1;
              }
            }
            this.$.geochart._dataTable=this.$.geochart._createDataTable(this.items);
            this.$.geochart._chartObject.draw( this.$.geochart._dataTable, this.$.geochart.options);
          },
        });
      })();
    </script>

  </dom-module>

  <x-element></x-element>

</body>
</html>

Polymer 1.x：数据绑定

Polymer 1.x: Data binding

data-binding

polymer

polymer-1.0