knockout.js，afterrender 函数无法按预期工作

Question

我的代码有问题，我正在使用 hljs 突出显示我正在使用的代码 sn-ps。我写了一个模板系统，例如一般输入是这样的：

<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）实际上是一个所有渲染元素的数组。来自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
}

所以它没有成功找到code 元素。你可以这样做：

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