Как применить Highlight.js к новым представлениям, используя Ember.js?

Question

Я пытаюсь использовать highlight.js для подсветки синтаксиса, но могу заставить его работать только при первой загрузке.

HTML:

<script type="text/x-handlebars" id="post">
 {{#if html}}
   {{rawhtml html}}
 {{else}}
   {{#each section}}
   {{rawhtml this}}
   {{/each}}
 {{/if}}
</script>

Используя didInsertElement, я могу запустить его только один раз.

App.PostView = Ember.View.extend({
  didInsertElement: function () {
    hljs.initHighlightingOnLoad();
  }
});

ДЕМО: http://jsbin.com/iKUrUWO/4 Перейдите в раздел " Код", а затем "Лучшие практики CSS". Обновите ваш браузер. Появится подсветка синтаксиса (розовая и фиолетовая). Перейдите к "Названию файлов" и обратно. Теперь код вернулся к белому.

JSBIN: http://jsbin.com/iKUrUWO/4/edit?html,js

Примечание. Я попытался использовать блочную форму помощника {{each}}, но безуспешно.

<script type="text/x-handlebars" id="post">
 {{each controller postViewClass="App.PostView"}}
</script>

App.PostView = Ember.View.extend({
  template: Ember.Handlebars.compile('{{#if html}}{{rawhtml html}}{{else}}{{#each section}}{{rawhtml this}}{{/each}}{{/if}}'),
    didInsertElement: function () {
      hljs.initHighlighting();
    }
  });

И почему-то не может использовать this.$().hljs.initHighlighting();,

Я начинаю путаться, поэтому любая помощь будет оценена! Спасибо!

Answer 1

Я думаю, что для этого вы хотите использовать вычисляемое свойство. Просто определите функцию, которая возвращает правильное значение с расширением.property в вашем классе "Post":

htmlContent: function() {
    var html= this.get('html');
    if (blah blah blah) {
        // do what you need to do to return the new content
    }
    return newValueToDisplay;
}.property('html')

Затем просто поместите это в свой шаблон: {{{htmlContent}}}

Вы говорите, что не можете использовать this.$().hljs.initHighlighting();но ты не говоришь почему? Сообщение в консоли?

Answer 2

Я думаю, что проблема в том, что ember-код не очень хорошо сочетается с кодом стиля jquery plugin. Похоже, что в highlight.js есть синхронные функции, которые просто берут некоторый код и отмечают его правильной подсветкой. hljs.highlightAuto('code')

Я бы попытался создать помощник для выделения руля, который обрабатывает текст с помощью функции hljs:
{{highlight model.html}}