javascript - polymer ，在构造函数中使用属性数据绑定(bind)

Question

我正在尝试使用 polymer 自定义元素来格式化和显示由charts.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);很好地解析为“figure1”，但 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未定义，因为 $ 返回的对象函数包含的属性keys是元素模板中元素的ids。所以你可以写this.$.figure1但不是this.$.chartID (这仅在您编写 <canvas id="chartID"> 时才有效)

长话短说，你能做的就是写this.$[this.chartID] 。这将访问 id 为 this.chartID 的元素依次为“figure1”。

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

附加说明:有一个 Chart.js Polymer element在 Polymer-Labs GitHub 存储库中，Rob Dodson 也写了一些 Chart.js Polymer elements .