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_canvas')作为简单的div元素（未附加地图）;
google map api返回异步并修改$('#map_canvas');
Meteor以某种方式检测到变化，尽管{{#isolate}}，仍然决定再次渲染整个模板（这在日志中显示）;
在Template.test.rendered内再次调用initialize（）。

我的问题：

为什么？
如果发生了这种情况，为什么Meteor只渲染两次，而不是无限次？
溶液？

3个问题，非常感谢！

Answer 1

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

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

注意：{{#constant}}区域做如果（无论出于何种原因）重新呈现周围的上下文，则会重新呈现。然而，新版本被抛弃而不是在DOM中被替换。所以请注意rendered回调只是第一次做的事情。

流星模板中包含的Google地图呈现两次

1 个答案: