9

次のようなテンプレートがあります。

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

私はそれをレンダリングします：

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

そして、私はいくつかのイベントハンドラーを持っています：

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

内容の大きさに応じてのrows属性を設定したいです。textareaHandlebarsヘルパーを作成できることはわかっていますが、レンダリングされているDOM要素にアクセスできないため、不要な複製を行う必要があります。私が望むのは、理想的には、要素がレンダリングされた後に流星がイベントをトリガーすることです。何かのようなもの：

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

これは可能ですか？

4

4 に答える 4

21

Meteor 0.4.0 以降、テンプレートのレンダリングが終了したかどうかを確認できます。http://docs.meteor.com/#template_rendered を参照してください。

私があなたの質問を正しく理解していれば、テキストエリアのサイズ変更コードを Template.foo.onRendered 関数内にラップする必要があります。

Template.foo.onRendered(function () {
  this.attach_textarea();
})
于 2012-09-05T16:44:58.523 に答える
16

これを行うための現在の「最善の」方法 (ちょっとしたハックです) は、 Meteor.js で DOM が更新された後にMeteor.deferala Callback を使用することだと思います。

Geoff は流星開発者の 1 人なので、彼の言葉は福音です :)

したがって、あなたの場合、次のようなことができます：

 <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();
}
于 2012-06-14T00:09:50.863 に答える
2

2014 年 6 月頃から、これを行う正しい方法は、 Template.myTemplate.onRendered()を使用してコールバックを設定することでした。

于 2015-05-27T23:28:23.420 に答える
0

ええ、そう思います-それが「正しい方法」かどうかはわかりませんが、これは私にとってはうまくいきます:

アプリの JS では、クライアント セクションは、クライアント上にある JavaScript を実行します。例えば：

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

ここの例では JQuery を使用していることに注意してください。その場合、これをクライアントに提供する必要があります (私は :-)。私の場合：

/client ディレクトリを作成し、この下に jquery.js ファイルを追加しました。

お役に立てれば。

于 2012-06-13T23:39:45.790 に答える