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

Question

我目前使用的是 Iron-router，这是我第一次尝试 Meteor 平台。我遇到了大多数 jquery 库无法正确初始化的问题，因为 Meteor 呈现 html 的方式，$(document).ready() 在呈现任何模板之前触发。我想知道是否有任何来自 Meteor/iron-router 的回调允许我替换 jQuery 的 dom 准备好？

另外，如果其中一些是由 jQuery/javascript 自定义的，我应该如何（轻松且正确地）处理 dom 元素的实时更新？

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

var jsInitalized = false;

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

Answer 1

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

例如，假设您想使用 jQuery DataTables 插件将排序添加到由模板创建的表格元素。你会监听模板的渲染事件并将插件绑定到 dom：

HTML：

<template name="data_table">
  <table class="table table-striped" id="tblData">
  </table>
</template>

JavaScript：

Template.data_table.rendered = function () {
  $('#tblData').dataTable();
};

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

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

Answer 2

尝试制作一个单独的 .js 文件，如果您愿意，可以将其命名为 render.js。然后;

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

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

还可以查看这部分文档，尤其是 Template.events； http://docs.meteor.com/#templates_api

Answer 3

我将 Meteor v0.8.0 与 Iron Router 一起使用（在 Windows 7 下），这是我处理“DOM 就绪”的方式：

当我想在渲染特定模板后修改 DOM：

我在客户端使用Template.myTemplateName.rendered：

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

当我想在渲染任何新路径后修改 DOM：

我用Router.onAfterAction，不过好像有窍门：

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

注意setTimeout(..., 0)，否则它对我不起作用（DOM 为空）。

请注意，您可以在特定路径上使用onAfterAction，但大多数时候我认为上面的Template.myTemplateName.rendered 方法是多余的。

似乎缺少什么：

一种在 any 模板被渲染后修改 DOM 的方法。