javascript - 如何在 meteor 准备好 DOM 后执行辅助函数

Question

我有一个 <li> 的列表如下所示，它使用 Meteor.startup 填充了 find()。然后我得到这些 <li> 的所有数据属性使用 data() 并将其放入一个对象中并尝试返回/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 插件)，然后在一个嵌套的 Subscribe 中从一个集合中获取所有文档，forEaches 结果并获取纬度和经度值，然后去在谷歌地图中添加标记...

编辑2

我通过这种方式将“ map ”变量设为全局变量，无需嵌套 .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

Meteor.startup

Meteor.startup() 只运行一次，它在客户端和服务器上运行。因此，当浏览器加载并且初始 DOM 准备就绪或服务器启动时。正如 Sohel Khalifa 所说，您将初始化函数放在这里。不要在此处定义模板，因为在触发此函数之前需要准备好模板。

Template.myTemplate.onRendered(function() {... })

这是在 meteor 完成并渲染 DOM 时运行。此外，每次 模板中的 HTML 更改时都会运行。因此，对于子模板中列表中的每个项目/项目中的更改/更新等以及列表，如果您使用它进行检查，您将看到 console.log 返回一些内容。有时调用数据时会返回null/undefined(我会解释):

这是否意味着所有 DOM 都已准备就绪？不!:

我认为这可能会给您带来一些麻烦。如果您使用 Google map 等外部 API，它们可能仍会呈现 map 。 Template.myTemplate.rendered() 意味着 Meteor 已完成使用必要的 react 变量渲染模板。因此，要了解您的 Google map 何时准备就绪，您需要连接到 Google map API。有一个look at this question

Using Meteor.subscribe

在使用 rendered 时你可能会得到 null/undefined 的原因是因为这是 meteor 通常将数据渲染到模板中的过程

您基本上是在订阅完成之前调用 console.log(getMarkers());，这就是为什么您得到 null/undefined

Meteor 使用这个带有模板和 react 数据的总结过程:

1. 构建没有数据和渲染的模板 - 此阶段还没有数据
2. 向服务器请求集合中的数据
3. 使用新数据重建模板并渲染

因此，如果在过程 1) 中，您将在很短的时间内没有数据，这就是为什么您可能会在第一次渲染时得到 null(例如在您的代码中)的原因。要解决这个问题，您应该使用 Meteor.subscribe 的回调，当所有数据都从服务器下载时运行:例如

Meteor.subscribe("lists", function() {
    //Callback fired when data received
});

注意:在使用它之前，您应该阅读有关使用 subscriptions 的文档因为您需要删除 autopublish 包，并在服务器上创建相应的 Meteor.publish 函数。虽然这看起来很乏味，但您最终可能还是会这样做，以便为您的用户提供他们自己的列表和/或实现某种安全措施。

建议对您的代码进行修改:

您正在正确的地方进行 DOM 遍历，Template.mytemplate.onRendered(function().. 但您还需要连接到 Google Maps 的 API 以在他们的 map 绘制完成时进行捕获. 你还应该使用 Meteor.subscribe 来确保你得到正确的时间而不是 null/undefined。

确保将模板助手放在 Meteor.isClient 而不是 Meteor.startup 中，因为 Meteor.startup 在初始 DOM 准备就绪后被触发( initial 是第一个但在它被 react 变量或路由器改变之前)所以你的模板定义需要在这个阶段之前运行。