在流星中准备好DOM后如何执行辅助函数

Question

我有一个<li> 的列表，它使用 Meteor.startup 填充了 find()，如下所示。然后我使用 data() 获取这些<li> 的所有数据属性并将其放入一个对象中并尝试返回/console.log 以便我可以查看它是否有效。但结果我得到了null。

    Meteor.startup(function () {
    Template.messages.lists = function () {
        var allitems = lists.find();
        return allitems;
    };
    var map;
    map = new GMaps({
        div: '#map_canvas',
        lat: -12.043333,
        lng: -77.028333
    });
    var lat = map.getCenter().lat();
    var lng = map.getCenter().lng();
    map.addMarker({
        lat: lat,
        lng: lng,
        draggable: true,
        title: 'Test',
        dragend: function (e) {
            $('#lat').val(this.getPosition().lat());
            $('#lng').val(this.getPosition().lng());
        }
    });
    console.log(getMarkers());
});


function getMarkers() {
    var coordinates = {};
    coordinates = $('li.message').data();
    return coordinates;
}

我直接在我的控制台中尝试了相同的方法并且它有效 - 我得到了一个对象 - 所以我猜测在这个函数执行之前 DOM 没有准备好/填充。

我很难理解 Meteor.startup 和 Template.mytemplate.rendered 之间的区别。在这种情况下，它们似乎都不能按我的意愿工作？

用 DOM 做事的正确方法/地点是什么（遍历、获取属性、操作）？

编辑

由于代码发生了很大变化，为了做我想做的事情，我发布了整个内容。

Meteor.startup(function () {
  var map;
  map = new GMaps({
    div: '#map_canvas',
    lat: 50.853642,
    lng: 4.357452
  });
  Meteor.subscribe('AllMessages', function() {
    var allitems = lists.find().fetch();
    console.log(allitems);
    allitems.forEach(function(item) { 
      var lat = item.location.lat; 
      var lng = item.location.lng;
      console.log('latitude is: ' + lat);
      console.log('longitude is: ' + lng);
      map.addMarker({ 
        lat: lat, 
        lng: lng, 
        draggable: true, 
        title: 'Test', 
        dragend: function(e) { 
          $('#lat').val(this.getPosition().lat()); 
          $('#lng').val(this.getPosition().lng()); 
        } 
      }); 
    });
  });
});

上面的代码在 Meteor.Startup 中创建了一个新的谷歌地图（使用 GMaps.js 插件），然后在一个嵌套的订阅中从一个集合中获取所有文档，forEaches 结果并获取纬度和经度值，然后去在谷歌地图中添加标记...

编辑 2

我将我的“地图”变量设为全局变量，这样就无需嵌套 .subscribe 和 .startup。 ：

Meteor.subscribe('AllMessages', function() {
  var allitems = lists.find().fetch();
  console.log(allitems);
  allitems.forEach(function(item) { 
    var lat = item.location.lat; 
    var lng = item.location.lng;
    console.log('latitude is: ' + lat);
    console.log('longitude is: ' + lng);
    map.addMarker({ 
      lat: lat, 
      lng: lng, 
      draggable: true, 
      title: item.description, 
      dragend: function(e) { 
        $('#lat').val(this.getPosition().lat()); 
        $('#lng').val(this.getPosition().lng()); 
      } 
    }); 
  });
});

Meteor.startup(function () {
  map = new GMaps({
    div: '#map_canvas',
    lat: 50.853642,
    lng: 4.357452
  });
});

Template.messages.lists = function () {
  var allitems = lists.find().fetch();
  return allitems;
}

Answer 1

结果返回null的原因是，你把它放在Meteor.startup()中。它实际上在从服务器加载数据之前运行。所以lists.find() 返回null。

Meteor.startup() 是一个用于初始化全局变量、响应会话和订阅来自服务器的主要数据的地方。您在那里编写的所有内容都将在客户端启动后立即执行一次。

Template.myTemplate.rendered()是meteor提供的一个特殊的helper，每次对应的数据发生变化时都会运行，主要用于获取模板中包含的属性或操作DOM元素。

因此，请将您的帮助代码放在公共isClient() 区域之外。并使用.rendered()helper 遍历DOM，获取或操作DOM元素的属性。