如何从Meteor事件处理程序集中DOM子元素

我有一个事件处理程序，它设置一个会话变量来更改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>

'dblclick td.itemName'：函数（evt）{
set（“editItemName”，true）；
evt.currentTarget.children[0].focus（）；
},
{{{#除非editItemName}}
{{name}}
{{else}
{{/除非}

非常直截了当

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

谢谢

---

Chet

双击函数运行时，将会话

editItemName

设置为true，然后尝试赋予输入元素焦点，但模板尚未重新呈现，因此尚未创建输入元素（在函数返回一段时间后将重新呈现模板）。换句话说：

evt.currentTarget.children[0]

不是对输入元素的引用

可能的解决方案1

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

可能的解决方案2

否则，当呈现模板且其中存在输入元素时，必须使用JavaScript对其进行聚焦：

Template.yourTemplate.rendered=function（）{
var input=this.find（'.editItemName'））
如果（输入）{
input.focus（）
}
}

您正在尝试将焦点设置为尚未渲染的DOM元素

这个问题困扰了我一段时间。我尝试过使用

autofocus='autofocus'

HTML属性：它在Firefox中没有效果，在Chrome中，它似乎只在元素第一次呈现时起作用

因此，我们需要一个在模板呈现之后调用的处理程序，以便使用javascript设置焦点

Template.templateName.rendered

看起来像是一种方法，但存在一个问题：

什么对我不起作用：

流星专家有什么解释吗？

作为@Chet，Template.[name]。模板更新时不再触发rendered，而是只在模板第一次呈现时触发，并且

您可以传递一个回调，每次更新模板时都会触发该回调。 i、 e

---

啊。有趣的。。。这是有道理的。有什么办法解决这个问题吗？@Chet看看我的改进答案。我想我要用x-editable。。。显然，我可以用陨石。不确定。还在学习…在最近的meteor版本中，他们更改了template.rendered（）的一些功能。Rendered用于在重新呈现模板中的信息时调用。现在，他们正在使用刀片模板系统，只需重新渲染模板中需要重新渲染的部分，template.rendered将只调用一次：非常感谢！现在我明白了为什么拆分为两个模板可以工作了：第二个模板

itemnamedit

会在用户每次编辑项目名称时从DOM中添加和删除，并在需要时触发

template.itemnamedit.rendered

。

Template.itemName.rendered

不是这种情况，因为

itemnamedit

保留在DOM中，所以只调用一次。

<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 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() 
}

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

    Tracker.afterFlush(function() {
      this.find('input').focus();
    }.bind(t));
  }
});