Meteor 1.1 - 特定元素在 dom 上呈现时的回调答案

【问题标题】：Meteor 1.1 - Callback when specific element renders on the domMeteor 1.1 - 特定元素在 dom 上呈现时的回调
【发布时间】：2015-09-03 07:39:45
【问题描述】：

我有一些我无法直接访问的 DOM 元素，因为它们是通过 API 调用呈现的。我想做的是在这个元素上添加一个类，一旦它在 DOM 上呈现。

使用Template.rendered 不起作用，因为模板会在这些 DOM 元素从 API 中出现之前正确呈现。

我目前的解决方案是Meteor.setTimeout——这可能是黑客的定义——它只在大约 90% 的时间里有效。

在呈现特定 DOM 元素时触发函数的最佳方式是什么？

以下是 API 调用中的一些相关代码：

Template.map.rendered = function() {

  return this.autorun(function() {
    var drawControl, drawnItems, mmap;
    if (Mapbox.loaded()) {
      L.mapbox.accessToken = '<API KEY>';
      L.mapbox.config.FORCE_HTTPS = true;

      mmap = L.mapbox.map('map', '<TOKEN>');

      L.control.scale().addTo(mmap);

      var featureGroup = L.featureGroup().addTo(mmap);

      drawControl = new L.Control.Draw({
        draw: {
            polygon: false,
            polyline: false,
            rectangle: true,
            circle: false,
            marker: false
          }
      });

      mmap.addControl(drawControl);
      mmap.addControl(L.mapbox.geocoderControl('mapbox.places', {
              autocomplete: true
          }));

      function showPolygonAreaEdited(e) {
        e.layers.eachLayer(function(layer) {
          showPolygonArea({ layer: layer });
        });
      }

      function showPolygonArea(e) {

        coords = {
            lat1: normalizeLon(e.layer.toGeoJSON().geometry.coordinates[0][1][0]),
            lon1: normalizeLat(e.layer.toGeoJSON().geometry.coordinates[0][1][1]),
            lat2: normalizeLon(e.layer.toGeoJSON().geometry.coordinates[0][3][0]),
            lon2: normalizeLat(e.layer.toGeoJSON().geometry.coordinates[0][3][1])
        }

        featureGroup.clearLayers();
        featureGroup.addLayer(e.layer);
        e.layer.openPopup();


      }

      mmap.on('draw:created', showPolygonArea);
      mmap.on('draw:edited', showPolygonAreaEdited);

    }

  });
};

我已经删除了很多无关的代码，所以这可能无法正确编译...但它包含所有相关位。

我最初尝试使用的选择器是这样的：

Template.map.rendered = function() {
  $('.leaflet-draw-section').attr('data-intro', 'Hello step one!')
  ...
  ...

但它不起作用，因为 API 元素尚未呈现。

【问题讨论】：

您使用的具体 API 是什么？插入 DOM 完成后，它是否提供自己的回调/事件？
我正在使用 Mapbox API 来渲染地图 :) 我不相信它具有我正在寻找的回调函数，但我现在会检查！我需要一个用于控制面板加载时的回调，以及一个用于加载地图图块时的回调（或一个用于整个加载完成时的主回调）。
有趣的是，我只是在寻找类似问题的答案。总的来说，这在 Meteor 中是一个难题，而且 IMO Meteor 将不得不公开一些新功能。一般情况是一个嵌入了其他模板的模板，并且您想要在嵌入的模板 all 将其内容插入 DOM 之后做一些事情（在我的例子中，滚动到底部）。

标签： javascript jquery dom meteor

【解决方案1】：

确保您的代码如下所示

Template.templatename.onRendered(function(){
    //yourcode
});

【讨论】：

这不是我想要的。模板正确渲染，但 API 调用尚未完成其 DOM 元素的渲染，因此出现错误 Error: There is no element with given selector.
@samcorcos 知道了，当 api 调用完成加载时，您需要一个回调函数

【解决方案2】：

查看map box api，似乎L.mapbox.map 进行了渲染：

<script>
// Provide your access token
L.mapbox.accessToken = 'id1' //
// Create a map in the div #map
L.mapbox.map('map', 'id2');
// add your class to #map right here!!
</script>

如果这不起作用，他们可能L.mapbox.map 正在做一些异步的事情。他们不会给您回电，因此可能需要window.setTimout(func, 0)

【讨论】：

【解决方案3】：

解决方案来自 Mapbox API。 “就绪”有回调：

var layer = L.mapbox.tileLayer('mapbox.streets');
layer.on('ready', function() {
  // the layer has been fully loaded now, and you can
  // call .getTileJSON and investigate its properties
});

【讨论】：