0

デバッグできない次の問題が発生しています。

私が行くテキストエリアフィールドのリストがあります

<template name="sampleTemplate">
<ul>
  {{#each listOfTextFields}}
   < li > < textarea id="{{_id}}" > </li>
  {{/each}}
</ul>
</template>

そのリストをレンダリングするために、私は持っています

Template.sampleTemplate.listOfTextFields = function () {
   return applicationDB.find({ //some fields })
}

また、「Enter」キーを押すとコレクションに新しいドキュメントを挿入する textareas にマップされたイベントもあります。その場合、テンプレートが再レンダリングされ、新しいテキストエリアが表示されます。

Template.sampleTemplate.events({
   'keydown enter' : function (enterEv) {
        //add new document to collection
        Session.set("newTextAreaCreated", 1);
        Session.set("newItemId", newItemId);

    }
}

次に...よりユーザーフレンドリーにするために、新しく作成されたドキュメントに focus() しようとしました。だから私はレンダリングされた関数に持っています:

Template.sampleTemplate.rendered = function () {
    if (Session.get("newTextAreaCreated") == 1){
        console.log("new text area is created")
        $(document.getElementById(Session.get("newItemId")).focus();
    }
Session.set("newTextAreaCreated", 0);
}

上記のコードは、現在最後の textarea フィールドにいるときに機能し、Enter キーを押すと、新しいアイテムが正常に作成され、それに焦点が当てられます。並べ替えを処理する他のコードのヒープ全体を持っているので、新しいアイテムは新しいアイテムの下に確実に作成されます(不思議に思う人もいるかもしれません)。

しかし、リストの途中で戻ってEnterキーを押すと、その下にアイテムが正常に作成されますが、それに焦点が当てられません。console.logs を使用して、レンダリングされた関数が呼び出され、呼び出されることを確認しましたが、フォーカスが明確ではありません。

これは、行をジャンプするテキスト領域の「入力」効果と関係があるのでしょうか? または、まったく異なるものになる可能性があります。テキストエリアが問題を引き起こしている場合など、より良い解決策を実装できることを嬉しく思います。

4

1 に答える 1

0

リスト項目を {{#isolate}} ブロックで囲み、ドキュメントの挿入をサーバー側の meteor メソッドに委譲します。分離ヘルパーは、親テンプレートが再レンダリングされないことを保証し、サーバー側の meteor メソッドは、シミュレーションがコレクションの挿入で実行されないことを保証します。この方法では、 render() は一度だけトリガーされ、フォーカスやアニメーションなどの DOM 関連の操作を実行できます。

于 2013-11-15T15:12:05.140 に答える