Question

我想只在Template.foo.rendered中运行一次代码。我有一个Leaflet地图和一个集成的locate-control插件。到目前为止它工作得很好但似乎渲染的模板经常重新运行。因此，我在地图上定位用户的标记每隔几秒就会重置一次。我只想初始化一次。

  var map, mapInit;
  map = void 0;

  mapInit = function (element){

      map = L.mapbox.map(element, 'examples.map-20v6611k').setView(new L.LatLng(52.02312,13.02627), 11);
      L.control.locate({drawCircle: true, position: 'topright'}).addTo(map);

  }

  Template.map.rendered = function () {
    $(window).resize(function () {
      var h = $(window).height(); 
      $mc = $('#map');
      $mc.css('height', h);
    }).resize();

    if (!this.rendered) {
      mapInit('map');
      this.rendered = true;
    }
  }

Answer 1

您可能希望将地图的DOM元素保存到全局或应用变量（此处为Map），然后将它们重新插入DOM中：

var Map;

...

var mapDomElement = $('#map');
if (Map.domElements) {
  mapDomElement.replaceWith(Map.domElements);
} else {
  Map.mapObject = L.mapbox.map(...) // instantiate map here
  Map.domElements = mapDomElement;
}

请注意。高度重新计算：你不需要这样做。使用CSS弹性框模型最大化地图高度：

<div style="display: flex; flex-flow: column; min-height: 100%">

  <div id="map" style="flex: 1"></div>

  <div>
    ... map controls here
  </div>
</div>

请参阅flex模型上的this answer。＆＃34;东西来到这里＆＃34; div是你的地图。

仅运行一次meteor.js代码

1 个答案: