Question

我有一个看起来像这样的模板：

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

我用：

渲染它

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

我有一些事件处理程序：

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

我想要做的是设置rows的{{1}}属性，具体取决于其内容的大小。我意识到我可以写一个Handlebars帮助器，但它不能访问正在渲染的DOM元素，这会迫使我做一些不必要的重复。理想情况下，我想要的是流星在渲染元素后触发事件。类似的东西：

textarea

这可能吗？

Answer 1

从Meteor 0.4.0开始，可以检查模板是否已完成渲染，请参阅http://docs.meteor.com/#template_rendered

如果我理解你的问题，你应该将你的textarea resize代码包装在Template.foo.onRendered函数中：

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

Answer 2

我认为当前“最好”的方式（这有点像黑客）是使用Meteor.defer ala Callback after the DOM was updated in Meteor.js。

Geoff是流星开发者之一，所以他的话就是福音：）

因此，在您的情况下，您可以执行以下操作：

 <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(); }

Answer 3

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

Answer 4

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

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

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

注意这里的示例使用JQuery，在这种情况下，您需要将此提供给客户端（我认为:-)。就我而言：

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

希望这有帮助。

渲染流星模板后运行JS

4 个答案: