如何使用jQuery提取動態加載的鬍鬚模板的一部分

爲了避免重複，我試圖在服務器和客戶端使用鬍鬚進行模板。我有一個像下面這樣的模板：如何使用jQuery提取動態加載的鬍鬚模板的一部分

<html> 
<head>...</head> 
<body> 
    <table> 
    <tbody id="#this"> 
     {{rows}} 
     <tr>{{row}}<tr> 
     {{/rows}} 
    </tbody> 
    </table> 
</body> 
</html>

這對我的服務器端模板非常適用。然而，在客戶端，我遇到了一些麻煩。我可以使用ajax成功加載模板，但我不需要整個事情來更新表的行。

$(function() { 
    var template; 
    $.ajax('templates/thetemplate.mustache', { 
     success : function (data) { 
      template = $('#this', data).html(); 
     }, 
     dataType : 'html' 
    }); 
});

當我使用上述jQuery來獲得在#this元素然而，{{rows}}和{{/rows}}線從結果剝離的內容，而它們之間的<tr>{{row}}</tr>成功返回。我怎樣才能得到整個內容？

我試過$('#this', data).contents();它給出了相同的結果，而$('#this', data).val();它返回一個空字符串。使用$(data).find('#this')代替具有相同的三個結果。我也嘗試將ajax調用的dataType設置爲'text'，但沒有明顯的效果。

我意識到我可以通過使用partials來實現我想要的功能（不會爲客戶端和服務器端的用途重複部分模板），並且它可以避免傳輸更多模板需要委託人把它扔掉，但這並不能回答我的問題。（壽光滑的解決方案表示讚賞）

感謝

來源

2012-03-04 coastwise

我也可以使用整個模板，然後在鬍子渲染後執行jQuery選擇，如下所示： var rendered = Mustache.render（wholetemplate，data）; $（'＃this'）。html（$（'＃this'，rendered）.html（））; 但我寧願得到我需要的模板部分。 – coastwise 2012-03-04 03:55:35

問題已經發生$('#this', data)，其通過瀏覽器的HTML解析器發送data將其轉換爲一個DOM片段。作爲容錯，HTML解析器對模板做了什麼，但它不是你想要的，因爲模板本身不是有效的HTML。由於這個原因，$('#this', data).anythingYouLike()或$(data).anythingYouLike()將不起作用。

由於在提交給瀏覽器的HTML解析器之前HTML必須是有效的，除了在向表達式提交有效的HTML到瀏覽器之前執行鬍鬚呈現之外別無選擇。

懷着這種約束，有關於事件的二階現實的選擇：

帶下來data只是<tbody ...>...</tbody>（與正則表達式），然後鬍鬚渲染，然後$tbody = $(renderedHTML)。
小鬍子使data完全，然後$tbody = $(renderedHTML).find('tbody')

據我所知，這兩種方法會奏效。在這兩種情況下，您最終都會得到一個包含填充的tbody節點的jQuery對象$tbody，然後可以用$tbody.appendTo($('#myTable'))或類似的方法將其插入到DOM中。

來源

2012-03-04 10:30:03

第一，你的模板是不是表的結構良好（職高，它的模板），你做$（數據）後，它會成爲一個好表，東西像這樣：

[" {{rows}} {{row}} {{/rows}} ", <table>…</table>]

{{行}}不在表中的元素，所以你不能得到你想要什麼$（ '＃這'，數據）的.html（）;

我的解決辦法：

data.replace(/\n/g, '').match(/<tbody id="#this">(.*)<\/tbody>/g)[0]

來源

2012-03-04 04:18:01 Lance

如何使用jQuery提取動態加載的鬍鬚模板的一部分

回答

相關問題