流星模板中包含的谷歌地图被渲染两次

Question

我有以下模板：

<template name="test">
  {{#isolate}}
    <div id="map_canvas" style="width:50%; height:50%"></div>
  {{/isolate}}
</template>

在我的 test.js 中（来自 https://developers.google.com/maps/documentation/javascript/tutorial#HelloWorld）：

function initialize(){
  var mapOptions = {
    center: new google.maps.LatLng(-34.397, 150.644),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map($("#map_canvas")[0], mapOptions);
}

Template.test.rendered = function(){
    initialize();
  //*** The following is the workaround I am using:***
  // if (! this.initialized){
  //   initialize();
  //   this.initialized = true;
  // }
};

问题是：如果没有注释代码部分中显示的解决方法，模板总是被渲染两次（因为 initialize() 运行）。它既显示在控制台日志中（此处未显示记录代码），也可以从闪烁一次的地图中看到（这是不可接受的）。

原因，我猜，是因为发生了以下事件：

1. 模板被渲染，$('#map_canvas') 生成为一个简单的 div 元素（未附加地图）；
2. google map api返回aync-ly并修改$('#map_canvas')；
3. Meteor 不知何故检测到更改，尽管有 {{#isolate}}，但仍决定再次渲染整个模板（这显示在日志中）；
4. 在Template.test.rendered 内再次调用initialize()。

我的问题：

1. 为什么？
2. 如果发生这种情况，为什么 Meteor 只渲染两次，而不是无限次？
3. 解决方案？

3 个问题，非常感谢！

Answer 1

由于包含{{> test}} 的外部上下文被重新渲染，模板可能被渲染了两次。发生这种情况的原因有多种，但通常只是它最初在没有订阅数据的情况下呈现，然后在数据加载后再次呈现。

无论如何，在您的具体情况下，我认为您想要的是您的谷歌地图周围的 {{#constant}} 包装器，而不是 {{#isolate}}。

注意：{{#constant}} 区域确实会在（无论出于何种原因）周围的上下文被重新渲染时重新渲染。然而，新版本被丢弃而不是在 DOM 中被替换。所以请小心rendered 回调，只做第一次。