Question

我目前正在使用铁路由器，这是我第一次试用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准备的方式＆＃39;：

当我想在呈现特定模板后修改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方法是多余的。

似乎缺少什么：

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

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

3 个答案: