jQuery模板呈現

我試圖填充一個jQuery模板並將結果附加到div中，但我收到錯誤。我只是不明白我的代碼中的缺陷。任何人都可以糾正它嗎？我正在使用jQuery版本1.4（jquery-1.4.1.min.js）。jQuery模板呈現

這裏是我的全碼：

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<style type="text/css"> 
.no_results 
{ 
    width:547px; 
    height:50px; 
    overflow: hidden; 
    text-align: center; 
    margin-top: 25px; 
    -moz-box-shadow: 3px 3px 4px #000; 
    -webkit-box-shadow: 3px 3px 4px #000; 
    box-shadow: 3px 3px 4px #000; 
    display:table-cell; 
    vertical-align:middle; 
    background:none repeat scroll 0 0 #FFFFE0; 
    border:1px solid #FFC978; 
} 
</style> 

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
var srchterm = 'Hello Sam'; 
var markup = "<ul><li><div class='no_results'><span>No results found for [${Name}] </span></div></li></ul>"; 

$("#showBtn").click(function() { 
$("#SearchData").empty(); 
$.tmpl("movieTemplate", srchterm).appendTo("#SearchData"); 
}); 
}); 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<asp:Button ID="showBtn" runat="server" Text="Change" /><br /><br /> 
<div id="SearchData"></div> 
</form> 
</body> 
</html>

來源

2012-07-23 Thomas

我沒有使用任何模板的js文件就像jquery.tmpl.js – Thomas 2012-07-23 10:23:25

是你得到任何控制檯錯誤？你是否縮小了問題的原因？你能爲我們創建一個jsfiddle的例子嗎？ – Undefined 2012-07-23 10:25:17

這是你想達到什麼目的： http://jsfiddle.net/2efSV/

我從

$.tmpl("movieTemplate", srchterm).appendTo("#SearchData");

改變了你調用$ .tmpl

至

$.tmpl(markup, { "Name" : srchterm }).appendTo("#SearchData");

的第一個參數應該是你的模板，第二個應該是包含您所使用的模板中的數據對象：

來源

2012-07-23 10:43:02 soupy1976

謝謝，但是當我添加模板到SearchData div與淡入淡出效果，然後沒有任何作品。我寫了如$ .tmpl（markup，{「Name」：srchterm}）的代碼。appendTo（「＃SearchData」）。fadeIn（'slow'）;你能告訴我如何在這裏實現fadein（）效果。 – Thomas 2012-07-23 10:55:14

您必須先隱藏（）您要追加的內容才能實現該目標 - 在此處[JSFiddle]（http://jsfiddle.net/2efSV/1/） – soupy1976 2012-07-23 10:58:39

jQuery模板呈現

回答

相關問題