Question

我目前有一个按钮，按下后会打开一个文本框。我想这样做，以便在按下按钮时焦点自动显示在此文本框中。

我有以下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，文本框实际上还没有存在。

当我将模式设置为'edit'时，是否有一种方法可以告诉Meteor在继续执行其余功能之前立即重新呈现HTML？有没有更好的方法来构建我的代码，以便我可以引用在Meteor重新呈现HTML之前不存在的HTML组件？

Answer 1

使用rendered挂钩：

Template.insertNewTask.rendered = function() {
  var $input = $("#insertTask");
  if (Session.equals('mode', 'edit')) $input.focus()
}

您可以在某处设置另一个标记，以指示您何时想要聚焦输入（例如，如果您在渲染编辑视图后并不总是希望在点击按钮之后将其聚焦）。

Meteor中有没有办法立即重新渲染？

1 个答案: