在Meteor.js中更新DOM后的回调

Question

我有这个Meteor项目:https://github.com/jfahrenkrug/code_buddy

它基本上是一个带有大文本区域和预先区域的工具,可让您输入自动推送到所有连接客户端的源代码片段.

我想在代码更改时自动运行highlightSyntax函数,但它确实不起作用.

我已经尝试过query.observe,但是效果不好:语法高亮闪烁一次然后再次消失.

所以我的问题是:在DOM更新后如何运行代码？

Answer 1

一个hacky方法是:

foo.html

<template name="mytemplate">
  <div id="my-magic-div">
    .. stuff goes here ..
    {{add_my_special_behavior}}
  </div>
</template>

foo.js

Template.mytemplate.add_my_special_behavior = function () {
  Meteor.defer(function () {
    // find #my-magic-div in the DOM
    // do stuff to it
  });
  // return nothing
};

每当渲染(或重新渲染)模板时都会调用该函数,因此您可以将其用作钩子来执行您想要执行的任何特殊DOM操作.你需要使用Meteor.defer(它与settimeout(f,0)做同样的事情),因为在渲染模板时,它还没有在DOM中.

请记住,您可以渲染模板而无需将其插入DOM中!例如,这样做是完全合法的:

console.log(Template.mytemplate())

因此,当呈现模板时,不能100%保证它最终会在DOM中结束.这取决于模板的用户.

Answer 2

从Meteor 0.4.0开始,Template.myTemplate.rendered提供回调

当Template.myTemplate的一个实例渲染到DOM节点并第一次放入文档时,会调用一次.

有关更多信息,请访问http://docs.meteor.com/#template_rendered

Answer 3

至于当前版本的Meteor(1.0),我们现在可以使用Tracker 的.afterFlush()函数.

Tracker.autorun(function(e){
   var data = Router.current().data();
   if(data.key !== undefined){
       //the data is there but dom may not be created yet
     Tracker.afterFlush(function(){
       //dom is now created.
    });
   }
});