knockout.js, функция afterrender не работает должным образом

Question

У меня проблема с моим кодом, я использую hljs, чтобы выделить фрагменты кода, которые я использую. Я написал систему шаблонов, в качестве примера общий ввод будет следующим:

<codeexample params="type: html">
  <div style="example_class">Example code</div>
</codeexample>

Мой шаблонный интерпретатор:

<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>

Моя функция handleCode:

this.handleCode = function(element) {
  var preCodeTags = $(element).find('pre code');
  preCodeTags.each(function(i, block) {
    hljs.highlightBlock(block);
    block.show(100);
  });
}

Проблема в том, что функция afterRender вызывается уже до того, как шаблон отображается в моем фактическом шаблоне, я использовал для добавления console.log($(element).find('pre code')); что привело к тому, что длина была 0.

[prevObject: jQuery.fn.jQuery.init[3], context: undefined, selector:
"pre code", constructor: function, init: function…] 
context: undefined
length: 0

Не должна функция afterRender запустить именно после процесса рендеринга? Есть ли известная работа вокруг? Когда я использую тайм-аут на 200 мс, он работает нормально, но, на мой взгляд, это худшее решение.

Answer 1

Ваш afterRender обработчик не совсем прав. Параметр (element в вашем случае) на самом деле массив всех элементов визуализации. Из документации:

viewModel.myPostProcessingLogic = function(elements) {
    // "elements" is an array of DOM nodes just rendered by the template
    // You can add custom post-processing logic here
}

Так что это не найти code элемент успешно. Вы могли бы сделать это вместо этого:

this.handleCode = function(elements) {
  var preCodeTags = $(elements).filter('div').find('pre code');
  preCodeTags.each(function(i, block) {
    hljs.highlightBlock(block);
    block.show(100);
  });
}