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

你确定这不起作用是因为在你的脚本之后放置了的Leaflet吗？

由于您将代码包装在jQuery's document ready shorthand function $(function () {})中，因此只有在页面的DOM准备就绪后才能执行，包括加载和执行的所有同步脚本。因此，您的代码将在加载并执行 Leaflet脚本后执行，即使其标记位于页面正文的底部。

然而您的架构中还有另一个问题...... jQuery本身是在代码之后加载的。因此，在解析代码时，尚未分配jQuery的$对象！

一个简单的解决方法是在页面脚本之前加载至少jQuery。

演示：http://plnkr.co/edit/LujU9IfGJ9AvJGjr5jIK?p=preview

另一种解决方案是将页面脚本与内容分开，并至少在jQuery脚本之后将其显示到特定的占位符中。

我可以在带有把手的模板JS之后加载页面级JS吗？

1 个答案: