在Polymer回调函数中访问div

时间:2016-09-19 16:34:04

标签: javascript polymer google-visualization polymer-1.0 polymer-starter-kit

我有一个基本的Polymer应用程序设置(其中一个示例应用程序在抽屉中有3个视图)。我想在每个视图中动态显示Google Charts。我在Polymer ready()函数中加载了谷歌图表,并在setOnLoadCallback上传递了一个函数。在回调函数中,我尝试创建图表并将其添加到div,但无法找到div。谁能告诉我我做错了什么?

<div id="chart_div" style="width: 900px; height: 500px"></div>

  <script>
    Polymer({
      is: 'my-view1',
      ready: function() {
        console.log('Polymer ready');

        google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(this.drawBasic);
      },

      drawBasic : function() {
        console.log('preparing to create chart');

        var chart_div = this.$.chart_div;
        console.log(chart_div);
      }
    });
  </script>

1 个答案:

答案 0 :(得分:2)

我认为你的错误就在这里:

google.charts.setOnLoadCallback(this.drawBasic)

解决此问题的一种方法是使用bind方法。 Here您可以找到有关该方法的文档。所以,我想这会奏效:

google.charts.setOnLoadCallback(this.drawBasic.bind(this))