jQuery模板渲染

时间:2012-07-23 10:22:00

标签: jquery

我试图填充jQuery模板并将结果附加到div中,但是我收到了错误。我只是不明白我的代码中的缺陷在哪里。任何人都可以纠正它吗?我使用的是jQuery 1.4版( jquery-1.4.1.min.js )。

这是我的完整代码:


<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>

1 个答案:

答案 0 :(得分:1)

这是你想要实现的目标: http://jsfiddle.net/2efSV/

我已将您的电话改为<。pmpl

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

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

第一个参数应该是您的模板,第二个参数应该是包含您在模板中使用的数据的对象: