2

我有一个事件处理程序，它设置一个会话变量来更改 DOM 元素中的内容——在本例中是一个表格单元格。

'dblclick td.itemName': function (evt) {
  Session.set("editItemName",true);
  evt.currentTarget.children[0].focus();
},


                <td class="itemName">
                {{#unless editItemName}}
                    {{name}} 
                {{else}}
                    <input class="editItemName" type="text" value="{{name}}" style="width:100px;">
                {{/unless}}
                </td>

很直接...

但是 evt.currentTarget.children 不起作用。一旦输入取代了文本，我想让它自动聚焦......流星文档说这是一个 DOM 对象，所以奇怪的是子函数不起作用......

谢谢

切特

4

3 回答 3

5

当您双击并运行您的函数时，您将会话设置editItemName为 true，然后您尝试为输入元素提供焦点，但尚未重新渲染模板，因此输入元素还没有已创建（模板将在您的函数返回后的某个时间重新呈现）。换句话说：evt.currentTarget.children[0]不是对输入元素的引用。

可能的解决方案 1

在 HTML 5 中有一个名为 autofocus 的属性，您可以使用它（至少我可以在 Chrome 中使用）。只需将其添加到输入元素：

<input autofocus="autofocus" class="editItemName" type="text" value="{{name}}" style="width:100px;">

可能的解决方案 2

否则，当模板被渲染并且您的输入元素存在于其中时，您必须使用 JavaScript 来关注它：

Template.yourTemplate.rendered = function(){

    var input = this.find('.editItemName')

    if(input){
        input.focus()
    }

}
于 2013-08-08T07:30:26.303 回答
4

您正在尝试将焦点设置到尚未呈现的 DOM 元素。

这个问题困扰了我一段时间。我尝试使用autofocus='autofocus'HTML 属性：它在 Firefox 中无效，而在 Chrome 中，它似乎只在第一次呈现元素时才起作用。

因此，我们需要一个在模板渲染后调用的处理程序，以便使用 javascript 设置焦点。Template.templateName.rendered看起来像要走的路，但有一个问题：

什么对我不起作用：

<template name="itemName">
    <td class="itemName">
    {{#unless editItemName}}
        {{name}} 
    {{else}}
        <input type="text" value="{{name}}">
    {{/unless}}
    </td>
</template>

Template.itemName.rendered = function()
{
    this.$('input').focus() 
}

执行此操作时，Template.yourTemplate.rendered似乎仅在您第一次单击该项目时触发（您只能正确获得一次焦点）。

什么对我有用：

<template name="itemName">
    <td class="itemName">
    {{#unless editItemName}}
        {{name}} 
    {{else}}
        {{> itemNameEdit}}
    {{/unless}}
    </td>
</template>

<template name="itemNameEdit">
    <input type="text" value="{{name}}">
</template>

Template.itemNameEdit.rendered = function()
{
    this.$('input').focus() 
}

流星专家有什么解释吗？

于 2014-04-24T07:50:21.487 回答
1

正如@Chet指出的那样， Template.[name].rendered 不再在模板更新时触发，而是仅在模板第一次渲染时触发，并且只有一次。

可以将回调传递给Tracker.afterFlush，每次更新模板时都会触发该回调。即处理所有反应更新

Template.myTemplate.events({
  'dblclick td.itemName': function(e, t) {
    Session.set("editItemName",true);

    Tracker.afterFlush(function() {
      this.find('input').focus();
    }.bind(t));
  }
});
于 2015-10-21T20:16:09.373 回答