Исключение в помощнике по шаблону: ошибка: невозможно использовать $ для компонента без DOM

Question

Я делаю приложение для заметок в Метеоре. У меня есть предварительный просмотр, который обновляется при вводе текста, показывает, как будет выглядеть заметка после отправки, а также отображает уценку. Теперь я хочу добавить подсветку синтаксиса к заметке предварительного просмотра.

Если то, что я пытаюсь сделать, не совсем понятно для вас, посмотрите демо здесь. И попробуйте создать новую заметку. В предварительном просмотре я хотел бы добавить подсветку синтаксиса.

Поскольку live-preview должно перезапускать подсветку синтаксиса каждый раз, когда что-то набирается, мне нужен способ подключиться к перерисовке содержимого note-preview, чтобы перезапустить код highlightjs.

В предыдущих версиях Meteor это было очень просто, просто используя Template.render = function () {...}, Но это больше невозможно, поскольку API был изменен для запуска рендеринга только один раз, когда шаблон отображается впервые.

Теперь я хочу попробовать следующее. Добавьте помощник шаблона рядом с функцией рендеринга уценки, чтобы он запускался при каждом обновлении контента. В этом 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]);
      }
  })
}