現在、押すとテキストボックスが開くボタンがあります。ボタンが押されたときに、このテキストボックスに自動的にフォーカスがあるようにしたいです。
ボタンと入力をレンダリングし、ボタン/入力を切り替える次の 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 コンポーネントを参照できるように、コードを構造化するより良い方法はありますか?