Polymer 1.x: Pre-loading element attributes

2019-08-13 17:09发布

站内问答 / JavaScript
1008 1 4

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:

console.error

Polymer::Attributes: couldn't decode Array as JSON

The following steps will recreate the problem:

  1. Open this jsBin.
  2. Notice the map loads properly in the output pane. (And works properly when states are selected and de-selected.)
  3. Scroll down to the bottom of the page to the <x-element> tag.
  4. Delete the x character in front of the selected attribute so the complete attribute reads: selected="['Colorado', 'South Dakota']".
  5. Notice the map disappeared, no longer loads properly and the errors described above appear in the console.
  6. Replace the x you just deleted and notice the map loads and works properly again.

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.

http://jsbin.com/qupoleveja/1/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>
      <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>

1条回答
啃猪蹄的小仙女
2楼-- · 2019-08-13 17:48

I think it should be

selected='["Colorado", "South Dakota"]'

JSON needs double quotes.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)