knockout.js, afterrender function doesnt work as expected - templates

Question

I got an issue with my code, im using hljs to highlight my code snippets which im using. I wrote a template system, as example the general input would be this:
<codeexample params="type: html">
<div style="example_class">Example code</div>
</codeexample>
My template interpreter:
<template id="codeexample">
<div class="code">
<pre><code data-bind="attr: {class: type}, template: { nodes: $componentTemplateNodes, afterRender: $root.handleCode}, visible: false ">
</code></pre>
</div>
</template>
My handleCode function:
this.handleCode = function(element) {
var preCodeTags = $(element).find('pre code');
preCodeTags.each(function(i, block) {
hljs.highlightBlock(block);
block.show(100);
});
}
The problem is that the afterRender function is called already before the template is rendered to my actual template, i used to add a console.log($(element).find('pre code')); which had the result that the length was 0.
[prevObject: jQuery.fn.jQuery.init[3], context: undefined, selector:
"pre code", constructor: function, init: function…]
context: undefined
length: 0
Shouldnt the function afterRender run exactly after the render process?
Is there a known work around? When I use a timeout for 200ms, it works fine, but this is the worst solution in my opinion.

Answer 1

Your afterRender handler isn't quite right. The parameter (element in your case) is actually an array of all elements rendered. From the documentation:
viewModel.myPostProcessingLogic = function(elements) {
// "elements" is an array of DOM nodes just rendered by the template
// You can add custom post-processing logic here
}
So it's not finding the code element successfuly. You could do this instead:
this.handleCode = function(elements) {
var preCodeTags = $(elements).filter('div').find('pre code');
preCodeTags.each(function(i, block) {
hljs.highlightBlock(block);
block.show(100);
});
}