google-maps-api-3 - meteor 模板中包含的谷歌地图被渲染两次

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() 时)。它既显示在控制台日志中(此处未显示日志记录代码)，也从 map 闪烁一次可见(这是 Not Acceptable )。

我猜原因是发生了以下事件:

1. 模板已渲染，$('#map_canvas') 生成为简单的 div 元素(未附加 map )；
2. Google map API 返回 aync-ly 并修改 $('#map_canvas');
3. 不知何故，Meteor 检测到了变化，并且不顾 {{#isolate}}，决定再次渲染整个模板(这在日志中显示)；
4. 在 Template.test.rendered 中再次调用 initialize()。

我的问题:

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

三个问题，非常感谢!

Answer 1

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

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

注意:{{#constant}}如果(无论出于何种原因)周围的上下文被重新渲染，区域确实会被重新渲染。然而，新版本在 DOM 中被丢弃而不是被替换。所以请小心你rendered仅在第一次执行某些操作的回调。