渲染流星模板后运行JS

Question

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

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

我渲染它:

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

我有一些事件处理程序:

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

我想要做的是设置取决于其内容大小的rows属性textarea.我意识到我可以写一个Handlebars帮助器,但它不能访问正在渲染的DOM元素,这会迫使我做一些不必要的重复.理想情况下,我想要的是流星在渲染元素后触发事件.就像是:

Template.foo.events = {
  'render textarea': sizeTextarea
}

这可能吗？

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.js中更新DOM后使用Meteor.deferala Callback.

杰夫是流星开发者之一,所以他的话就是福音:)

所以在你的情况下,你可以这样做:

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