meteor - 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
};

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

请记住，您可以在不将模板插入 DOM 的情况下渲染模板!例如，这样做是完全合法的:

console.log(Template.mytemplate())

所以当一个模板被渲染时，并不能 100% 保证它最终会出现在 DOM 中。这取决于模板的用户。