渲染Meteor模板后运行JS代码

Question

我有一个模板，看起来大致如下：

<template name="foo">
  <textarea name="text">{{contents}}</textarea>
</template>

我用以下代码进行渲染：

Template.foo = function() {
  return Foos.find();
}

我有一些事件处理程序：

Template.foo.events = {
  'blur textarea': blurHandler
}

我想做的是根据文本内容的大小设置元素的<code>rows</code>属性。我知道可以编写Handlebars助手，但它无法访问呈现的DOM元素，这会导致不必要的重复代码。理想情况下，我希望Meteor在元素呈现后触发一个事件。类似于：</br><div class="h-2"></div><pre class="guess-Groovy"><code>Template.foo.events = { 'render textarea': sizeTextarea } </code></pre></br><div class="h-2"></div>这可行吗？

- Trevor Burnham

---

可能是在Meteor.js中DOM更新后的回调的重复问题。 - Trevor Burnham

Answer 1

自Meteor 0.4.0版本开始，可以检查模板是否完成了渲染。请参见http://docs.meteor.com/#template_rendered。

如果我正确理解了您的问题，您应该将文本区域调整大小的代码放在Template.foo.onRendered函数中：

Template.foo.onRendered(function () {
  this.attach_textarea();
})

- Sander van den Akker

Answer 2

我认为当前实现这个功能的“最佳”方法（有点hack）是使用 Meteor.defer，就像在Meteor.js中更新DOM后回调中所示。

Geoff是Meteor开发人员之一，他的话就是真理 :)

所以在你的情况下，你可以这样做：

 <textarea id="{{attach_textarea}}">....</textarea>

和

 Template.foo.attach_textarea = function() {
   if (!this.uuid) this.uuid = Meteor.uuid();

   Meteor.defer(function() {
     $('#' + this.uuid).whatever();
   });

   return this.uuid;
 }

编辑

注意，从0.4.0版本开始，你可以以更加临时的方式完成这个操作（正如Sander所指出的那样）：

Template.foo.rendered = function() {
  $(this.find('textarea')).whatever();
}

- Tom Coleman

---

为了确保我理解正确 - 在这里使用动态id没有什么神奇的，只是这个函数每次元素被渲染时都会被调用？也就是说，你可以使用数据属性或其他方式来实现这个功能？ - 7zark7

哦，Meteor.defer只是对setTimeout(..., 0)的一个封装，对吧？我想到过这种方法，但它可能会导致明显的闪烁。我真的需要一个在事件循环之前执行的后渲染钩子。 - Trevor Burnham

说了这么多，我还是会接受这个答案，因为我的问题是你链接中所提到的那一个问题的重复（尽管该问题中被接受的答案离理想状态相差甚远）。 - Trevor Burnham

@7zark7：动态ID只是为了让您在延迟调用中找到相关元素。如何实现取决于您，使用Meteor.uuid仅是一个建议。 - Tom Coleman

@TrevorBurnham：是的（好吧，使用Meteor.setTimeout，详见文档）。所以你想要在DOM节点附加后但在节点被浏览器渲染之前运行某些内容；也就是在渲染线程返回之前？据我所知，很抱歉没有办法钩入那里。 - Tom Coleman

@7zark7:哦，我重新阅读了你的评论，你是对的，id每次都会改变，这实际上是一个错误 :)通常如果上下文(this)没有uuid，我会将其附加到上下文中。 - Tom Coleman

Answer 3

自2014年6月以来，正确的方法是使用Template.myTemplate.onRendered()设置回调函数。

- foobarbecue

---

它不会每次都触发，只会触发一次。 - Egor

Answer 4

是的，我想是这样 - 不确定是否是“正确的方法”，但这对我有效：

在您的应用程序JS中，客户端部分将运行客户端上的任何javascript。例如：

if (Meteor.is_client) {
    $(function() {
        $('textarea').attr('rows' , 12) // or whatever you need to do
    })
    ...

请注意，此示例使用JQuery，因此您需要将其提供给客户端（我想是这样的:-)。在我的情况下：

我创建了一个/client目录，并在其中添加了jquery.js文件。

希望这可以帮到您。

- 7zark7

---

问题在于，尽管这可能在初始绘制时有效，但如果元素发生反应性重绘，它将遇到问题。 - Tom Coleman

另外，Meteor不是已经包含了jQuery吗？我在任何地方都没有找到jquery.js文件，也没有添加任何特殊的jQuery包，但我可以在我的Meteor应用程序中很好地使用jQuery。 - Mike Turley

我记得我必须要执行 'meteor add jquery' - Vic Goldfeld