テンプレートJSの後にページレベルJSをハンドルバーでロードできますか？

Question

私はハンドルバーとリーフレットを一緒に使用しています。私のlibs（リーフレット）は、メインのコンテンツの下に縮小されたjsファイルとともにテンプレートにロードされます。

メインテンプレート

<main class="app-content"> 
    {{{body}}} 
    </main> 
    {{> footer }} 
    <!-- jQuery first, then Bootstrap JS. --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
    <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.1/semantic.min.js"></script> 
    <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script> 
    <script src='/js/main.min.js'></script> 

私はこれがベストプラクティスであると考えています。私はリーフレットにレンダリングするために渡されたマッピングデータがあるページを持っています。ページレベルのJSがリーフレットの前にロードされているときにこのデータをうまく処理するにはどうしたらいいですか？もちろん、これはうまくいきません。

シングルビュー

<script> 
$(function() { 
    var map = L.map('map').setView([{{data.lat}}, {{data.lng}}], 9); 
    var os = new L.BingLayer("XXXXXXXX", { type: 'OrdnanceSurvey' }); 
    os.addTo(map) 
}); 
</script> 

任意のポインタを歓迎されるだろう。

Answer 1

リーフレットがのスクリプトの後に配置されているため、これはうまくいかないのですか？

コードをjQuery's document ready shorthand function $(function() {})にラップするので、読み込まれ実行されたすべての同期スクリプトを含め、ページのDOMが準備完了した後で実行する必要があります。したがって、の後にコードがを実行します。タグがページ本文の下部に配置されていても、リーフレットスクリプトがロードされて実行されました。

しかしあなたのアーキテクチャでは別の問題がある...それはあなたのコードの後に​​をロードされているjQueryのそのものです。したがって、コードが解析されると、jQueryの$オブジェクトはまだ割り当てられていません！

単純な回避策は、ページスクリプトの前に少なくともjQueryをロードすることです。

デモ：http://plnkr.co/edit/LujU9IfGJ9AvJGjr5jIK?p=preview

別の解決策は、コンテンツからページのスクリプトを分離するために、特定のプレースホルダにそれを表示するには、少なくとも、jQueryのスクリプトの後になります。