如何正确处理为Meteor做好准备的dom

我目前正在使用iron router，这是我第一次尝试Meteor平台。我一直遇到这样的问题：大多数jquery库都无法正确初始化，因为Meteor呈现html的方式不同，$（document）.ready（）在呈现任何模板之前激发。我想知道是否有来自Meteor/iron路由器的回调允许我替换jQuery的dom就绪

另外，如果一些dom元素是由jQuery/javascript定制的，我应该如何（轻松而正确地）处理它们的实时更新

这就是我目前正在做的，我觉得这是非常黑客的，如果元素在初始化后得到更新，可能会遇到问题

var jsInitalized = false;

Router.map(function () {
  this.route('', {
    path: '/',
    layoutTemplate: 'default',
    after: function(){
      if(!jsInitalized){
        setTimeout(function(){
          $(document).ready( function() { $$$(); });
        }, 0);
        jsInitalized = true;
      }
    }
  });
}

---

尝试创建一个单独的.js文件，如果愿意，可以将其命名为rendered.js。然后,

Template.layout.rendered = function ()
{
    $(document).ready(function(){console.log('ready')});
}

我使用模板布局，但您可以使用template.default.rendered。我希望这有帮助

---

还要看一下这部分文档，特别是Template.events

对于Meteor，您通常需要考虑模板何时准备好，而不是dom何时准备好

例如，假设您想使用jQuery DataTables插件向模板创建的表元素添加排序。您将侦听模板的呈现事件并将插件绑定到dom：

HTML:

现在，只要重新呈现模板（例如，如果数据发生更改），就会调用处理程序，您可以再次将jQuery插件绑定到dom

---

这是一般做法。有关完整的示例（包括用行填充表），请参见此。

我使用Meteor v0.8.0和Iron Router（在Windows 7下），下面是我如何处理“DOM就绪”的：

当我想在呈现特定模板后修改DOM时：

我在客户端使用

Template.myTemplateName.rendered

：

Template.blog.rendered = function()
{
    $('#addPost').click(function() 
    { 
        ...
    });
}

当我想在呈现任何新路径后修改DOM时：

我使用了

路由器.onAfterAction

，但似乎有一个技巧：

Router.onAfterAction(function()
{
    setTimeout(function() 
    {
        $('.clickable').click(function() 
        { 
            ...
        });
    }, 0);
});

请注意

setTimeout（…，0）

，否则它对我不起作用（DOM empty）

注意，您可以在特定路径上使用

onaafteraction

，但大多数情况下，我认为上面的

Template.myTemplateName.rendered

方法是多余的

似乎缺少什么：

---

一种在呈现任何模板后修改DOM的方法。

如果您所引用的模板被多次使用（例如在列表中），并且您希望在呈现完所有3个模板后执行一个操作，则此方法有效吗？这是众多奇怪之处之一。你可能想考虑使用流路由器，这是一个更简单的流星路由器。也许这是老掉牙的原因。我得到了一个JavaScript异常：Type Error：未定义不是ObjeTyeA，现在你可能需要使用“模板。布局。OnDrand”。

Template.blog.rendered = function()
{
    $('#addPost').click(function() 
    { 
        ...
    });
}

Router.onAfterAction(function()
{
    setTimeout(function() 
    {
        $('.clickable').click(function() 
        { 
            ...
        });
    }, 0);
});