SyntaxHighlighter with $（）。load Not Working

編輯：編輯爲清晰和實際使用。實際使用甚至可能使這種情況更容易？

我正在構建一個樣式指南，我想爲將要使用該指南的人員提供常見樣式/模式的源代碼。我的計劃是將所有沉重的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。精美的作品。

來源

2014-02-08 EHorodyski

編輯：

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在fininsh加載所有外部腳本時告訴你。

先提取方法loadScript

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

然後按全部任務到一個數組，最後用$。當（）。然後，（）通知當所有的腳本已經加載，然後調用SyntaxHighlighter的。所有（）;

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

來源

2014-02-08 02:16:03 Sean

後不幸，當我嘗試這個，我只是得到'

執行'通過SyntaxHightlighter返回兩次。這是當我嘗試使用'$（）。load（「test.html」，function（response）{...}）;'因爲load'的第二個參數是一個回調方法，如果我是沒錯。 – EHorodyski

[jsfiddler]（http://jsfiddle.net/xujihui1985/eQ5f8/）對不起，嘗試loadScript（this）而不是 – Sean

是的，第二個參數是一個回調函數，它會在遠程成功加載時調用，並且'deferred .resolve（）;'表明它完成加載 – Sean

$(document).ready(function(){ 

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

這應該工作，因爲SyntaxHighlighter.all();的test.html加載

來源

2014-02-08 03:30:38

你會這樣想，對吧？但它不... – EHorodyski

@EHorodyski，我不這麼認爲，它在jquery文檔中給出。看看這裏https://api.jquery.com/load/ –

@AmitJoki你知道'SyntaxHighlighter.all（）'每次都會在循環中調用嗎？如果有10個元素，它將被調用10次，而'SyntaxHighlighter.all（）'這個方法只應該調用一次，你不認爲這太可怕了嗎？ – Sean

SyntaxHighlighter with $（）。load Not Working

回答

相關問題