Question

修改：为了清晰和实际使用而进行编辑。实际使用可能会使这种情况更容易吗？

我正在构建一个样式指南，我希望将源代码包含在将要使用该指南的人的常见样式/模式中。我的计划是将所有繁重的HTML代码模块抽象为外部文件并使用jQuery将其拉入，然后使用SyntaxHighlighter突出显示屏幕上显示的内容。下面的HTML显示了我的意图和我想做的事情。

我暂时删除了所有JavaScript，因为它没有为手头的问题添加任何值。我会用我提出的任何内容进行更新。

<div class="sg-section">
    <div class="sg-section-body">
        <div data-load="markup/pagination.html"></div>
    </div>
    <div class="sg-section-code">
        <small>Source Code</small>
        <pre class="brush: js">
            <!-- This is where I want to print out the contents  -->
            <!-- of the 'sg-section body' above and show it's source -->
        </pre>
    </div>
</div>

我可以通过一个简单的$('[data-load]'.each();语句来加载数据，但是我很难将结果打印到sg-section-code并让它变得更加明亮。

结论：切换到Prism。工作得很漂亮。

Answer 1

<强>编辑：

  function loadScript(placeholder){
    var $p = $(placeholder);
    var deferred = $.Deferred();
    $p.load($p.attr('data-load'),function(response){
        $p.parent().append(response).end().remove();   
        deferred.resolve();
    });
    return deferred;
}

删除占位符并直接从外部html插入代码，这样可以解决只显示占位符而不是实际代码的问题。

你的问题是load是一个异步方法，你不知道何时调用SyntaxHighlight.all（）;

所以，解决方案进入我的脑海是使用jQuery.Deferred对象。让load告诉你何时加载所有外部脚本。

首先提取方法loadScript

function loadScript(placeholder){
  var $p = $(placeholder);
  var deferred = $.Deferred();
  $p.load($p.attr('data-load'),function(){
    deferred.resolve();
  });
  return deferred;
}

然后将所有任务推送到一个数组中，最后使用$ .when（）。then（）通知何时加载了所有脚本，然后调用SyntaxHighlighter.all（）;

$(function(){
  var q = [];
  $('[data-load]').each(function(item){
    q.push(loadScript(item));
  });
  $.when.apply($, q).done(function(){
    SyntaxHighlighter.all();
  });
});

Answer 2

$(document).ready(function(){

    // Get Markup Pages
    $("[data-load]").each(function (index) {
        $(this).load($(this).attr("data-load"),function(){SyntaxHighlighter.all()});
    });
});

这应该有效，因为SyntaxHighlighter.all();在加载test.html后执行

带$（）的SyntaxHighlighter。加载不工作

2 个答案: