Question

所以我在我的一个模板文件中有一些JavaScript，它设置了一些与模板相关的JavaScript对象。

        <hr class="statcard-hr mb-0">
      </div>
      <canvas id="chart-ph" width="378" height="94" class="sparkline"
        style="width: 200px; height: 50px;"></canvas>
    </div>
  </div>
</div>

</table>
</div>

<script>
  //populate initial chart data
  getSensorData('recent');

  //create chart
  createChart('chart-temp', 10, 30);
  createChart('chart-hum', 20, 60);
  createChart('chart-ec', 500, 2800);
  createChart('chart-ph', 4, 8);
</script>

{% endblock %}

问题是模板文件是在主.js文件（加载在基本模板底部）之前加载的。因此没有定义createChart和getSensorData。我很好奇你通常会如何构建这个。

对我而言，在模板中设置JavaScript对象是有意义的，但我想通常人们会以另一种方式进行操作？

Answer 1

在文档准备好之前，页面无法安全操作。＆＃34;所以你可以用这个：

bindMemory(to:capacity:)

或者您可以使用$（function（））

只需将代码放在模板上方即可。从底部取下并将其放在上面。

Answer 2

您应该将函数调用放在文档中，如下所示

<script>
  $(function() {
      //populate initial chart data
      getSensorData('recent');

      //create chart
      createChart('chart-temp', 10, 30);
      createChart('chart-hum', 20, 60);
      createChart('chart-ec', 500, 2800);
      createChart('chart-ph', 4, 8);
  });
</script>

如何在html模板中处理javascript

2 个答案: