版本 2 中的 knockoutjs afterRender 问题，在版本 1.2.X 中不明显答案

【问题标题】：knockoutjs afterRender issue in version 2, not apparent in version 1.2.X版本 2 中的 knockoutjs afterRender 问题，在版本 1.2.X 中不明显
【发布时间】：2012-01-07 22:59:09
【问题描述】：

我最近将一个现有项目从 KnockoutJS 1.2.1 更新到了 KnockoutJS 2.0（尽管我使用以前的版本启动它）。自更新以来，我注意到 afterRender 似乎在元素实际上完全在 html 中之前触发。

我环顾四周，根据该领域的其他一些问题，这似乎是预期的行为：

Why are template divs showing as ":hidden" in afterRender?

问题体现在 Jquery Validate 中，我将一些规则应用于元素，它告诉我元素不存在。奇怪的是，这在 1.2.1 中可以正常工作。我不确定这是否是因为 afterRender 在以前的版本中的处理方式不同，或者是否对通用本机模板系统的更改导致它的行为不同......

如果发生了变化或者这是预期的行为，有没有办法知道模板元素何时实际进入了它们应该在的 html 中？我知道加载的元素是通过 afterRender 回调参数传回的，但是在这个阶段将它们用于与 Dom 操作相关的任何内容是否安全？

编辑

我整理了一个具体问题的示例： Example project showing issue

如果您查看每个模板的 afterRender 逻辑，它只会进行一些简单的验证，但每当您尝试使用元素时，它就会崩溃，但是如果您取出验证逻辑，它就可以正常工作。

如果我做错了什么并尝试修复它，我非常乐意举手，但老实说我不知道问题出在哪里，因为一切都是孤立的......

【问题讨论】：

你有一些示例代码吗？在afterRender 期间，元素现在位于 DOM 中，而以前（1.2.1）它们还没有。看来您正在经历相反的情况。
目前没有示例，这是一个巨大的项目，最初我不确定问题出在哪里，因为我也在使用多个第三方库，但是在为每个库制作测试用例之后，我可以找不到他们的问题。值得一提的是，我正在使用外部模板系统，但我尝试了 2 个不同的模板系统，并且两个 Knockout 都出现了相同的问题，我将看看我是否可以整理一个快速示例来显示问题，就好像你不能立即看到任何错误，一定是发生了一些奇怪的事情。
@rp-niemeyer 添加了一个显示我当前遇到的问题的示例，尽管错误在 jquery 验证器中显示出来，但问题似乎是它无法在页面中找到元素的内容（我想想）

标签： dom knockout.js templating

【解决方案1】：

问题在于外部模板引擎异步加载模板并最初使用“加载”模板。这意味着您的 afterRender 函数会被调用两次。引擎目前没有选项仅在使用真实模板后运行afterRender。我将看看如何添加对它的支持。

您有一些选择： -afterRender 函数传递一个元素数组作为第一个参数。您可以检查数组以查看它是否包含您的真实元素。

-否则，在您的连接代码中，您可以在进行验证调用之前检查您的元素是否存在。

因此，您的函数将被调用两次。您只需要确保在第一次执行时不执行任何需要您的 DOM 元素存在的代码。

【讨论】：

感谢您的回复，虽然不太理想，但至少我知道现在的问题是什么......

【解决方案2】：

我是@Grofit 在他发布的示例应用程序中使用的外部模板引擎的作者。我已经更新了项目，以便它将 afterRender 调用包装在一个函数中，该函数首先检查外部模板源的“已加载”布尔标志是否已设置为 true。我已经发布了示例项目的更新版本here。

Ryan - 我希望得到您对此的反馈，以防我应该寻求更好的解决方案。这似乎是最好的选择......

【讨论】：

在此处添加评论：github.com/ifandelse/Knockout.js-External-Template-Engine/…。只需维护this 并将参数传递给真正的 afterAdd 函数。

【解决方案3】：

经过大量挖掘，问题似乎出在模板加载框架上，并且因为它们是异步的……由于某种原因，这没有得到正确处理，因此敲除会触发两次事件……

理想情况下，我仍然希望能够使用异步加载，但我不确定这是否需要更改 Knockout 或外部绑定......或者两者都需要......

【讨论】：