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();
  }
});

DEMO：http://jsbin.com/iKUrUWO/4转到Code，然后是'CSS Best Practices'。刷新浏览器。将出现语法突出显示（粉红色和紫色）。导航到“命名文件”并返回。现在代码又恢复了白色。

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

我认为你想要使用一个计算属性。只需定义一个函数，该函数返回正确的值，然后在＆＃34; Post＆＃34;中添加.property扩展名。类：

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插件'样式代码不能很好地混合。它看起来像highlight.js有同步函数可用，只需要一些代码并用正确的突出显示标记hljs.highlightAuto('code')

我尝试创建一个高亮的把手助手，用hljs函数处理文本，如：
{{highlight model.html}}

如何使用Ember.js将Highlight.js应用于新视图？

2 个答案: