knockoutjs afterRender issue在版本2中，在1.2.X版本中不明显 [英] knockoutjs afterRender issue in version 2, not apparent in version 1.2.X

问题描述

最近我从KnockoutJS 1.2.1中更新了KnockoutJS 2.0的一个现有项目（尽管我使用之前的版本开始了）。因为更新我注意到afterRender似乎是在元素实际完全在html之前被触发。

我做了一些环顾四周，似乎这是预期的根据这方面的其他一些问题，行为：

为什么模板div显示为：hidden in afterRender？

该问题表现在Jquery Validate中，我将某些规则应用于元素，并告诉我元素不存在。这个奇怪的事情是，这在1.2.1中曾经很好的工作。我不知道这是否是因为afterRender在以前的版本中被不同地处理，或者一般原生模板系统的更改导致它的行为不同...

如果有变化或者这是行为有什么办法知道什么时候模板元素实际上输入了它们应该在哪里？我知道加载的元素是通过afterRender回调参数传回的，但是在这个阶段可以安全地使用这些对于Dom操纵的任何内容的操作？

编辑

我已经组织了一个我的具体问题的例子：
示例项目显示问题

如果您查看每个模板的afterRender逻辑，它只是一些简单的验证，但是每当你尝试使用它只是爆炸的元素，但是如果你拿出验证逻辑，它可以正常工作。

我很乐意放如果我做错了，尝试修复它，但我真的不知道问题是什么，因为一切都是孤立的...

解决方案

问题是外部模板引擎异步加载模板，最初使用load 模板。这意味着你的 afterRender 函数被调用两次。在使用真正的模板之后，引擎目前没有选项，只能运行 afterRender 。我将看看添加支持将需要什么。

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

另外，在您的有线代码中，您可以在进行验证呼叫之前检查您的元素是否存在。

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

I have recently updated an existing project to KnockoutJS 2.0 from KnockoutJS 1.2.1 (although I started it using the previous version). Since updating I have noticed that afterRender seems to be firing before elements are actually fully within the html.

I did a bit of looking around and it seems like this is the intended behaviour according to a few other questions around this area:

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

The problem manifests itself with Jquery Validate where I apply some rules to elements and it tells me that the elements do not exist. The bizarre thing is that this used to work fine in 1.2.1. I am not sure if this is because the afterRender was handled differently in previous versions or if the changes to the general native template system cause it to behave differently...

If there have been changes or this is intended behaviour is there any way to know when the template elements have actually entered the html where they should be? I know the loaded elements are passed back via the afterRender callbacks arguments but is it safe to use these for anything contextual to Dom manipulation at this stage?

Edit

I have put together an example of my specific problem: Example project showing issue

If you take a look at the afterRender logic for each template it just does some simple validation but whenever you try to use the elements it just blows up, however if you take out the validation logic it works fine.

I am more than happy to put up my hands if I have done something wrong and try to fix it but I honestly don't know what the problem is, as everything works in isolation...

解决方案

The issue is that the external template engine asynchronously loads the template and initially uses a "loading" template. This means that your afterRender functions get called twice. The engine does not currently have an option to only run afterRender after the real template is being used. I will have a look at what it would take to add support for it.

Some options that you have: -the afterRender functions are passed an array of elements as the first argument. You can check the array to see if it contains your real elements.

-otherwise, in your wire up code, you can check if your elements exist before making your validation calls.

So, your functions will be called twice. You just need to make sure that the first time you don't execute any code that requires your DOM elements to be present.

这篇关于knockoutjs afterRender issue在版本2中，在1.2.X版本中不明显的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！