meteor - 如何正确处理 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 插件将排序添加到由模板创建的表格元素。您将监听模板的渲染事件并将插件绑定(bind)到 dom:

HTML:

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

JavaScript:

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

现在，无论何时重新渲染模板(例如，如果数据更改)，您的处理程序都会被调用，您可以再次将 jQuery 插件绑定(bind)到 dom。

这是一般方法。完整的例子(包括用行填充表格)见 answer .