Question

我遇到了以下无法调试的问题：

我有一个textarea字段列表，我去了

<template name="sampleTemplate">
<ul>
  {{#each listOfTextFields}}
   < li > < textarea id="{{_id}}" > </li>
  {{/each}}
</ul>
</template>

为了呈现该列表，我有

Template.sampleTemplate.listOfTextFields = function () {
   return applicationDB.find({ //some fields })
}

我还有一个映射到textareas的事件，当我按下“enter”键时，我会在集合中插入一个新文档。当发生这种情况时，将重新呈现模板并显示新的文本区域。

Template.sampleTemplate.events({
   'keydown enter' : function (enterEv) {
        //add new document to collection
        Session.set("newTextAreaCreated", 1);
        Session.set("newItemId", newItemId);

    }
}

然后......为了使其更加用户友好，我尝试将焦点（）放在新创建的文档上。所以我有我的渲染功能：

Template.sampleTemplate.rendered = function () {
    if (Session.get("newTextAreaCreated") == 1){
        console.log("new text area is created")
        $(document.getElementById(Session.get("newItemId")).focus();
    }
Session.set("newTextAreaCreated", 0);
}

当我当前在最后一个textarea字段时，上面的代码有效，而当我按Enter键时，它成功创建了新项目，并专注于它。 我有一大堆其他代码来处理排序，所以新项目肯定是在新项目下创建的（以防你们有些人可能会想到）。

但是 - 当我在中间的某个位置返回列表时，我按下回车键，它会成功创建它下面的项目，但它不会关注它。我已经使用了console.logs来确保调用渲染的函数，但确实如此，但焦点并不明显。

这可能与文字区域的“输入”效果有关吗？或者可能是完全不同的东西。如果textareas造成问题等，我非常乐意实施更好的解决方案。

Answer 1

在列表项周围放置一个{{#isolate}}块，并将文档插入委托给服务器端流星方法。隔离助手将确保父模板不会重新渲染，服务器端流星方法将保证模拟不会在集合插入上运行。这样render（）只会触发一次，你可以做与DOM相关的事情，如聚焦或动画。

调用Template.rendered中的jQuery但不生效

1 个答案: