流星模板中包含的Google地图呈现两次 [英] Google map contained in meteor Template is rendered twice

问题描述

我有以下模板:

<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 ):

In my test.js (from 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()时).它既显示在控制台日志中(此处未显示记录代码)，也从地图中闪烁一次可见(这是不可接受的).

The problem is: without the workaround shown in the commented code section, the template is always rendered twice (as initialize() is run). It's both shown in console logs (logging code not shown here) and also visible from the map flashing once (which is not acceptable).

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

The reason, I am guessing, is from the following events happending:

1. 呈现模板，并以简单的div元素(未附加地图)生成$('#map_canvas')；
2. google map api返回aync-ly并修改$('#map_canvas');
3. Meteor以某种方式检测到更改，并且尽管使用了{{#isolate}}，还是决定再次渲染整个模板(这在日志中显示)；
在Template.test.rendered中再次调用
4. initialize().

1. the template is rendered, with $('#map_canvas') generated as a simple div element (no map attached);
2. google map api returns aync-ly and modifies $('#map_canvas');
3. somehow Meteor detects the change, and in spite of {{#isolate}}, decides to render the whole template once again (this is shown in log);
4. initialize() is called again, within Template.test.rendered.

我的问题:

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

3个问题，非常感谢！

3 questions and lots of thanks!

推荐答案

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

The template is probably being rendered twice due to the outer context that contains {{> test}} being re-rendered. There's a variety of reasons why this might happen, but usually it's just that it renders initially without subscription data, and then a second time when the data has loaded.

无论如何，在您的特定情况下，我认为您想要的是Google地图周围的{{#constant}}包装器，而不是{{#isolate}}.

Anyway, in your specific case, I think what you want is a {{#constant}} wrapper around your google map, rather than an {{#isolate}}.

注意:如果(由于某种原因)周围环境被重新渲染，则重新渲染{{#constant}}区域要做.但是，新版本被扔掉了，而不是在DOM中被替换了.因此，请小心在rendered回调中仅在第一次执行.

NOTE: {{#constant}} areas do get re-rendered if (for whatever reason) the surrounding context is re-rendered. However the new version gets thrown away rather than replaced in the DOM. So just be careful in you rendered callback to only do something the first time.

这篇关于流星模板中包含的Google地图呈现两次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！