Question

我正在Meteor中做笔记应用程序。我有一个实时预览，在您输入时更新，显示提交后的注释，它还会显示降价。现在我想在预览音符中添加语法高亮。

如果我想要做的事情并不完全清楚，请查看demo here。并尝试创建一个新笔记。在预览中，我想添加语法高亮。

由于实时预览需要在每次输入内容时重新运行语法高亮，我需要一种方法来挂钩预览注释的内容，重新运行highlightjs代码。

使用以前版本的Meteor，只需使用Template.render = function () {...}即可。但是这已经不可能了，因为当模板第一次渲染时，API改为仅运行渲染一次。

我现在想要尝试的是以下内容。在markdown render函数旁边添加一个模板助手，因此每次内容更新时它都会运行。在这个rerender函数中，我将查找当前模板实例，并运行突出显示代码。

模板

<template name="previewNote">
{{#if content}}
<div class="note preview">
    <h2 class="previewTitle">Preview</h2>
    <hr>
    <div class="middleNote">
        <h1>{{title}}</h1>
        <!-- THIS LINE -->
        <p class='note-content'>{{#markdown}}{{content}}{{rerender}}{{/markdown}}</p>
        <!-- THIS LINE -->
    </div>
    <hr>
    <ul class="tags bottomNote">
        {{#each tags}}
        <li class="tag"><a>{{this}}</a></li>
        {{/each}}
    </ul>
</div>
{{/if}}
</template>

JS

Template.previewNote.rerender = function () {
    // get the current template instance, and highlight all code blocks
    var codes = UI._templateInstance().findAll("pre>code");
    for (var i = 0; i < codes.length; i++) {
        hljs.highlightBlock(codes[i]);
    }
};

这看起来非常可靠，直到我尝试出来并获得例外。

Exception in template helper: Error: Can't use $ on component with no DOM。

我正在寻找：为什么会发生这种错误，以及我如何解决它。或者另一种方法，以达到我正在寻找的结果。

Answer 1

像这样使用Tracker.autorun：

Template.previewNote.rendered = function(){
  this.autorun(function(){
      // every time Template.currentData is changed then this function reruns
      Template.currentData();

      var codes = self.findAll("pre>code");
      for (var i = 0; i < codes.length; i++) {
         hljs.highlightBlock(codes[i]);
      }
  })
}

模板助手中的异常：错误：无法在没有DOM的组件上使用$

模板

JS

1 个答案: