Knockout after Render release in version 2, not obvious in version 1.2.X

Question

I recently upgraded an existing project to KnockoutJS 2.0 from KnockoutJS 1.2.1 (although I started using the previous version). Starting with the update, I noticed that afterRender seems to fire before the elements are actually completely inside the html.

I looked around a bit, and it looks like this is the intended behavior on several other issues in this area:

Why are div templates displayed as ": hidden" in afterRender?

The problem manifests itself in Jquery Validate, where I apply some rules to the elements and this tells me that the elements do not exist. Bizarrely, this worked well in 1.2.1. I'm not sure if this is due to the fact that afterRender was handled differently in previous versions or if changes in the general system of native templates lead to behavior differently ...

If changes have occurred or is this the intended behavior, is there a way to find out when the elements of the template really entered the html, where should they be? I know that the loaded elements are passed back through the afterRender callback arguments, but is it safe to use them for anything contextual to manipulate Dom at this point?

Edit

I put together an example of my specific problem: An example showing the problem

If you look at the afterRender logic for each template, it just does some simple validation, but whenever you try to use elements that it just explodes, however, if you choose the verification logic, it works fine.

I am more than happy to raise my hands if I did something wrong and try to fix it, but I honestly don’t know what the problem is, because everything works in isolation ...

Answer 1

The problem is that the external template engine asynchronously loads the template and uses the loading template initially. This means that your afterRender functions afterRender called twice. Currently, the engine does not have the ability to start only afterRender after using a real template. I'll see what it takes to add support.

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

- otherwise, in your wired code, you can check to see if your items exist before making your checks.

So, your functions will be called twice. You just need to make sure that the first time you do not execute code that requires the presence of your DOM elements.

Answer 2

I am the author of the external template engine that @Grofit uses in the sample application that he posted. I updated the project so that it wrapped the afterRender call in a function that first checks to see if the original buffer flag is set with the external buffer true. I posted an updated version of the sample project here .

Ryan - I will like your feedback on this if there is a better solution I should pursue. It seemed like the best option ....

Answer 3

After repeated searches, it turns out that the problem is not related to templates loading templates and because they are asynchronous ... and for some reason is not being processed properly, so the knockout fires the event twice ...

Ideally, I would like to use asynchronous loading, but I'm not sure if this will require a change in Knockout or external bindings ... or maybe both ...