聚合物元素 <chart-pie> 和绑定

Question

我开发了一种聚合物元件。在这个元素中，我收到了一些参数。当我将 [value array] 参数传递给元素时不起作用。但是，如果我手动输入值，它会起作用。

这是聚合物元素头：

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

这是代码问题：

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

这是调用：

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

我加入了#mudasobwa 建议g：

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

这是输出：

并且控制台错误与类型相关：

Answer 1

TL;DNR 数组不是 HTML 的内置类型。您应该传递 "[1,2,3]" 之类的字符串，而不是数组本身 ([1,2,3])，后者将透明地转换为字符串 '1,2,3'（注意缺少方括号。）

让我们简化您的代码段以找出问题所在。

首先，我们将定义假 chart-pie 组件以确保不会引发问题。

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

现在我们将尝试将数组和字符串都传递给元素：

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

现在比较输出，我们将看到传递参数的正确方法是：

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

内部Array#toString()，不幸的是在数组周围放置了方括号。因此，要使其正常工作，您需要将数组本身转换为字符串。例如。 '[' + myArray.join(',') + ']'.

UPD：我还不能理解原因，但是在图表饼的情况下图表值的字符串应该显式转换为数组：

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

聚合物元素 <chart-pie> 和绑定

Polymer elemento <chart-pie> and binding

javascript

web-component

pie-chart

polymer