2

現在、押すとテキストボックスが開くボタンがあります。ボタンが押されたときに、このテキストボックスに自動的にフォーカスがあるようにしたいです。

ボタンと入力をレンダリングし、ボタン/入力を切り替える次の HTML があります。

    {{#if modeIs 'edit' }}
    <input class="col-xs-9" placeholder="Enter your new task and press enter"  id="insertTask" type="text"/>
    {{else}}
    <button id="btnNewTask"  class="btn btn-success btn-lg" role="button">New Task</button>
    {{/if}}

モードを確認するヘルパー関数。

Template.insertNewTask.helpers({
    modeIs: function (modeToCheck) {
        return Session.equals('mode', modeToCheck);

    }
});

これは、ボタンをクリックしてモードを変更し、入力にフォーカスするときに使用したいコードです。

'click #btnNewTask': function (event, template) {
    Session.set('mode', 'edit');
    var input = $(template.find('#insertTask'));

    if(input){
        input.focus();
    }

},

「モード」を変更するビットが機能し、ボタンをクリックするとボタンがテキストボックスに変わります。

私の問題は、このクエリです $(template.find('#insertTask')); モードを設定しましたが、HTML はまだ再レンダリングされておらず、テキスト ボックスは実際にはまだ存在しないため、何も返されません。

モードを「編集」に設定したときに、Meteor に残りの機能に進む前に HTML をすぐに再レンダリングするように指示する方法はありますか? Meteor が HTML を再レンダリングするまで存在しない HTML コンポーネントを参照できるように、コードを構造化するより良い方法はありますか?

4

1 に答える 1