Polymer 1.x: привязка данных

Я хочу выбрать состояния в <google-chart>geo map element shown in this jsBin.Polymer 1.x: привязка данных

Когда я выбираю состояние, я ожидаю, что он изменит цвет (на темный чирок), но вместо этого он останется одного цвета (светло-серый).

Выполните следующие шаги, чтобы воссоздать проблему:

Open this jsBin.
В разделе dom-module><script>>properties>items>value, изменить массив ['Alabama', 0] в ['Alabama', 1].
Обратите внимание, что состояние Алабамы меняет цвет от светло-серого до темного.
Наведите указатель мыши на состояние штата Алабама.
Обратите внимание, что значение переменной Select равно 1 для состояния штата Алабама (и 0 для всех остальных состояний).
Возвращает значение массива до ['Alabama', 0].
Обратите внимание на предыдущий шаг доказывает код генерации geochart ведет себя, как ожидается, когда свойство items вручную мутировали.
Здесь возникнут проблемы ...
Нажмите на состояние штата Алабама.
В консоли обратите внимание на значение массива items[1]: ['Alabama', 1].
Обратите внимание, что значение Select равно 0 (в отличие от случая, когда мы вручную изменили его выше).

В чем проблема?

Я не уверен but perhaps the solution involves properly implementing this advice?

При обработке событий, сгенерированных экземпляром шаблона dom-repeat, вы часто хотите сопоставить элемент, запускающий событие, в данные модели, сгенерировавшие этот элемент.

Но как реализовать это решение в этом случае? Или это даже решение?

Какое решение? Пожалуйста, покажите, как работает jsBin.

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

<!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>

источник

2016-02-07 Mowzer

Вы должны добавить к функции _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

источник

2016-02-07 21:54:00 Alon

Полный текст решения по @Alon выглядит следующим образом:

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

<!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>

источник

2016-02-07 22:58:34 Mowzer

Polymer 1.x: привязка данных

ответ

Смежные вопросы