Polymer 1.x: Pre-loading element attributes

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:

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 x character in front of the selected attribute 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 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>

Upvotes: 1

Answers (1)

Günter Zöchbauer

Reputation: 657148

I think it should be

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

JSON needs double quotes.

Upvotes: 1

Polymer 1.x: Pre-loading element attributes

Question

Answers (1)

Related Questions