CODEWITHSUNDEEP
javascriptpolymerpie-chartweb-component
Nicolas Bortolotti
Nicolas Bortolotti

Reputation: 555

Polymer elemento <chart-pie> and binding

I have developed a polymer element. In this element I receive some parameters. When I pass [value array] parameter to element does not work. But if I put the values manually, it works.

This is the polymer element head:

<polymer-element name="nick-viewer-card" attributes="program details link chart">

This is the code problem:

    <div class="heading" on-click="{{ toggle }}">{{ program }}</div>
    <core-collapse id="collapse">
        <div class="content">
            <div>{{ details }}</div>
            <div><a href="{{ link }}"> more details</a></div>
            <div>{{ chart }}</div>
            <chart-pie
                width="150"
                height="150"
                values="[30, 50, 100, 40, 120]"> <!-- {{ chart }} -->
            </chart-pie>
        </div>
    </core-collapse>

And this is the invocation:

        <nick-viewer-card program="{{gsx$program.$t}}" details="{{gsx$details.$t}}"
            link="{{gsx$link.$t}}" chart="{{gsx$chart.$t}}"></nick-viewer-card>

I included #mudasobwa suggestiong:

            <div>{{ chart }}</div>
            <div><a href="{{ link }}"> more details</a></div>
            <chart-pie
                width="150"
                height="150"
                values="{{ chart }}">
            </chart-pie>

This is the output:

enter image description here

and the console error is related the type: enter image description here

Upvotes: 0

Views: 150

Answers (1)

Aleksei Matiushkin
Aleksei Matiushkin

Reputation: 121000

TL;DNR Array is not a built-in type for HTML. You should pass string like "[1,2,3]" rather than the array itself ([1,2,3]) which would be transparently converted to string '1,2,3' (note a lack of square brackets around.)

Let’s simplify your snippet to find the problem out.

First of all, we’ll define the fake chart-pie component to assure that the problem is not induced.

<polymer-element name="chart-pie-fake" attributes="values">
  <template>
    {{ values }}
  </template>
  <script>
    Polymer({});
  </script>
</polymer-element>

Now we’ll try to pass both array and string to the element:

  <div>{{ chart }}</div>
  <chart-pie-fake
      values="{{ chart }}"> <!-- STRING / ARRAY -->
  </chart-pie-fake>

Comparing outputs now, we’ll see, that the correct way to pass an argument is:

  <script>
    Polymer({
      chart_will_fail: [30, 50, 100, 40, 120],
      chart: '[30, 50, 100, 40, 120]'
    });
  </script>

Internal Array#toString(), unfortunately drops square brackets around the array. So, to make it working you need to convert the array to string itself. E.g. '[' + myArray.join(',') + ']'.

UPD: I can’t yet understand the reason, but the string for chart values in the case with chart-pie should be explicitly cast to an array:

<chart-pie
      width="150"
      height="150"
      values="{{ chart | arrayize }}"> <!-- OMG -->
</chart-pie>
...
Polymer({
  arrayize: function(el) {
    return JSON.parse(el);
  }
});

Upvotes: 2

Related Questions