在 ember 中使用 highlight.js答案

【问题标题】：Using highlight.js in ember在 ember 中使用 highlight.js
【发布时间】：2014-07-02 21:35:21
【问题描述】：

我的 ember 应用在左侧设置了帖子列表，在右侧设置了单个帖子的视图。单击左侧的帖子之一时，其内容将呈现在右侧的视图中。

这是我用来为帖子添加语法高亮的代码。

App.PostView = Ember.View.extend({
  didInsertElement: function() {
    $('pre code').each(function(i, e) {hljs.highlightBlock(e)});
  }
});

当第一个帖子视图被渲染时，它具有语法突出显示，但是当我点击另一个帖子并且它的内容被加载到帖子视图中时，语法突出显示不会被应用。如何使每次呈现帖子时都应用突出显示？

【问题讨论】：

标签： javascript ember.js syntax-highlighting highlight highlight.js

【解决方案1】：

这可能不是完成这项工作的最干净的方法，但您可以尝试将观察者添加到控制器的模型中，并进行必要的更改。但这只有在模型本身发生变化时才有效。

像这样：

postHasChanged: function() {
    if (this.get('state') === 'inDOM') {
        $('pre code').each(function(i, e) {
            hljs.highlightBlock(e)
        });
    }
}.observes('controller.model')

【讨论】：

我将此 sn-p 放入 App.PostView 并且突出显示没有应用。应该是this.$('pre code').each....？当我将其更改为抛出错误Error while loading route: TypeError: Cannot read property 'each' of undefined at null.postHasChanged (http://localhost:3000/assets/app.js:16:23)
您需要确保视图状态为inDOM，以便它可以访问渲染的元素。
我试过了，this.get('state') 从来没有'inDom'的值
它是inDOM 而不是inDom

【解决方案2】：

如果没有更全面的例子，我只能猜测。 PostView 是在右侧面板中创建的吗？如果是这样，那么您需要将视图渲染限制为视图内的内容。

在您的示例中，$('pre code') 将针对文档中的所有 pre code 元素。试试this.$('pre code')，或者任何需要在视图中突出显示的元素/选择器。

【讨论】：

是的，PostView 是在右侧面板中创建的。问题是语法突出显示仅适用于在该面板中查看的第一篇文章。当您单击另一个并将其加载到 PostView 时，didInsertElement 函数不会运行，因此该帖子没有语法突出显示。我希望这能让问题更清楚。
没有更多代码就无法判断。我建议您尝试隔离问题并在 jsbin 上放一些玩具示例。