htmlテンプレート内でjavascriptを処理する方法

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

ドキュメントが「準備完了」になるまでページを安全に操作することはできません。ちょうどあなたのテンプレートの上に自分のコードを配置

$(document).ready(function() { 
    //Your script 
}); 

か、$（関数（））を使用することができます

：だから、これを使用することができます。それを底から取り出し、上に置きます。

Answer 2

あなたの機能はあなたが通常別々のファイルにJavaScriptを持っているだけで、あなたが実際にそれを必要とするとき、DOMにスクリプトを挿入したい

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