我目前有一个按钮，当按下该按钮时，将打开一个文本框。我要这样做，以便在按下按钮时焦点自动位于此文本框上。
我有以下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组件？
使用rendered钩子：
Template.insertNewTask.rendered = function() {
var $input = $("#insertTask");
if (Session.equals('mode', 'edit')) $input.focus()
}
您可以在某处设置另一个标志，以指示何时要聚焦输入（例如，如果在单击按钮后，在渲染编辑视图后并不总是要聚焦输入）。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句