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

3

使用rendered钩子：

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

您可以在某处设置另一个标志以指示何时要聚焦输入（例如，如果您在渲染编辑视图后不总是想聚焦它，只需单击按钮后）。

于 2013-11-06T14:41:36.300 回答