问题
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...
回答1:
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.
回答2:
I'm the author of the external template engine that @Grofit is using in the sample application he posted. I have updated the project so that it wraps an afterRender call in a function that first checks to see if the external template source's "loaded" boolean flag has been set to true. I've posted an updated version of the sample project here.
Ryan - I would love your feedback on this, in case there is a better solution I should pursue. This seemed like the best option....
回答3:
After much digging it appears that the problem is infact down to the template loading frameworks and because they are asynchronous... and this for some reason is not handled properly so knockout fires the event twice...
Ideally I would like to still be able to use async loading but I am not sure if that would require a change to Knockout or the external bindings... or maybe both...
来源：https://stackoverflow.com/questions/8773824/knockoutjs-afterrender-issue-in-version-2-not-apparent-in-version-1-2-x