如何在特定页面上加载文件

how to load file on a specific page?

本文关键字：加载 文件      更新时间：2023-09-26

我得到了一个名为map.html的页面，这是一个使用Google Maps API的简单HTML：

<head>
    <script type="text/javascript"
            src="https://maps.googleapis.com/maps/api/js?key=XXXXXXX&sensor=true&region=IL">
    </script>
    <script src="map.js" type="text/javascript"></script>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
</head>
        <body>
        </body>
<template name="map">
    <div id="map-canvas"></div>
</template>

我使用铁路由器路由到此页面：

this.route("map");

还使用 pathFor：

<a href="{{pathFor 'map'}}" class="map"><div class="inner">set location</div></a></div>

最后，我的谷歌地图初始化函数位于一个名为map.js的sperate文件中：

$(document).ready(function () {
    function initialize() {
        var TLV = new google.maps.LatLng(32.06461, 34.777222);
        var mapOptions = {
            zoom: 12,
            center: TLV,
            panControl: false,
            zoomControl: false,
            mapTypeControl: true,
            scaleControl: false,
            streetViewControl: false,
            overviewMapControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        marker = new google.maps.Marker({
            position: TLV,
            map: map,
            title: 'Hello World!',
            draggable: true
        });
        google.maps.event.addListener(marker, 'dragend', function (evt) {
            var pos = [marker.getPosition().lat(), marker.getPosition().lng()];
            console.log(pos);
        });
    }
    google.maps.event.addDomListener(window, 'load', initialize);
});

如果您手动路由到 http：localhost/map 一切正常但是，如果您从本地主机单击该路由的链接以映射它不起作用，现在我得到它 meteor 在启动时提供所有文件，问题是如何防止它？或者如何将某个文件提供给特定页面？

你不是在想 Meteor 的方式：Meteor 将所有 HTML 和 JS 资源捆绑到客户端（因此 Meteor 应用程序在第一次加载时的初始缓慢启动时间，这可能会在以后解决）。这意味着您放入头部和身体标签中的所有内容最终都会合并，没有单独的头部和身体的"页面"概念。您也不应该以传统方式包含第三方代码，从 head 标签中删除所有资源。你应该把你自己的代码（map.js）放在"client/js/"中，把你的库放在"client/compatibility/"中，它们将被捆绑并发送到客户端。

现在发生的事情是，你的map.js代码在document.ready上以传统的jQuery方式执行，这在Meteor应用程序中只发生一次，因为我们谈论的是单个网页应用程序。但是，当您导航到"/"时，此代码将在正确的 DOM 尚不存在时执行，并且当您导航到"/map"时，代码不会重新执行，因此这就是它失败的原因。

要解决此特定问题，请执行以下操作：

首先，您应该用 {{#constant}} 指令包围您的地图画布。

<template name="map">
    {{#constant}}
        <div id="map-canvas"></div>
    {{/constant}}
</template>

这将告诉 Meteor 不要在这个块助手中重新渲染任何东西：它不会弄乱不需要反应和重新渲染的谷歌地图小部件。如果你不这样做，每当页面中的反应源发生变化并导致你的 DOM 刷新时，它可能会清除 map-canvasdiv 以用新的替换它（这基本上是重新渲染所做的）并破坏 Google 地图自己的东西。

然后将您的 Google 地图初始化代码放入 Template.map.render 回调中。

Template.map.rendered=function(){
    var initializeOnlyOnce=_.once(function(){
        // Google Maps initialization code goes here
    });
    initializeOnlyOnce();
};

为了确保 Template.map 渲染只调用一次，我们使用 underscore.once（http://underscorejs.org/#once）。你不需要addDomListener window.load的东西，因为当这段代码运行时，页面已经加载，我们已经准备好立即执行谷歌地图渲染了。

告诉我它是否解决了你的问题，我还没有测试过这段代码，但这应该让你开始去哪里，因为目前你不能阻止 Meteor 在启动时为你的所有文件提供服务，并且将特定文件提供给特定页面不是要走的路，因为 Meteor 中没有这样的"页面"概念。

这些事情目前非常乏味，但我听说新的Meteor UI会让它变得更加简单。

相关文章：