聚合物，在构造函数中使用属性数据绑定

Question

我正在尝试使用聚合物自定义元素来格式化和显示图表呈现的图表.js - 我正在尝试获取自定义元素<chart-element>将其实例化属性chartID传递给构造函数以正确创建图表 - 对于我的生活，我无法让getContext()方法/函数使用传递的属性在任何东西上运行

这是实例化的自定义元素声明：

<chart-element chartID="figure1"></chart-element>

这是我的自定义元素：

<polymer-element name="chart-element" attributes="chartID">
  <template>
    <style>...</style>
    <div class="content">
        <canvas id="{{chartID}}" class="pieChart"></canvas>
    </div>
  </template>
  <script>
    Polymer('chart-element', {
        ready: function () {
            var dataFigure1 = [...];
            alert(this.chartID);
            alert(this.$.chartID);
            alert(this.chartID.getContext('2d');
            var canvasElement = this.chartID.getContext("2d");
            alert("canvasElement: "+canvasElement);
            new Chart(canvasElement).Pie(dataFigure1);
        }
   });
  </script>
</polymer-element>

我已经尝试了最后一行的一百万个不同的组合来呈现图表，但我似乎找不到一个有效的

alert(this.chartID);解析为"Figure 1"，但new Chart(this.chartID.getContext('2d')).Pie(dataFigure1);抛出"未定义不是函数"错误

alert(this.$.chartID);解析为"未定义">

alert(this.chartID.getContext('2d');根本无法解决，或者没有警报，这并不奇怪

new Chart(this.$.figure1.getContext('2d')).Pie(dataFigure1);工作正常，但我试图不硬编码这一行......

Answer 1

alert(this.chartID)显示元素的 chartID 属性的内容。此属性包含字符串"figure1">，因为它作为属性传入 chartID="figure1" 。

this.chartID.getContext('2d')尝试在此字符串上调用函数getContext()。由于字符串不包含此函数，因此会出现"未定义不是函数">错误。

this.$.chartID未定义，因为 $ 函数返回的对象包含属性，这些属性的键是元素模板中元素的 ID。所以你可以写this.$.figure1但不能写this.$.chartID(这只有在你写<canvas id="chartID">时才有效(

长话短说，你可以做的就是写this.$[this.chartID].这将访问 id this.chartID的元素，而该元素又是"Figure 1"。

但问题是：你为什么要这样做。由于影子 DOM 将元素中的所有 DOM 与外部隔离，因此如果您简单地编写 <canvas id="chart"> ，它不会造成任何问题。即使您实例化了许多图表元素，这些相同的 ID 也不会相互干扰。

附加说明：在 Polymer-Labs GitHub 存储库中有一个 Chart.js Polymer 元素，Rob Dodson 还编写了一些 Chart.js Polymer 元素。