jquery 中的tmpl类似于asp.net中的datalist控件。

<script id="guestNav" type="text/x-jquery-tmpl">
<div id="guestTopNavWrap">
<table id="topNav" cellpadding="0" cellspacing="0">
    <tr>
        <td id="topSiteName"><a href="/">${siteName}</a></td>
        <td id="topNavMenu">
        </td>
        <td style="padding-right:5px; text-align:right;">        
        <form action="${LoginAction}" method="post" id="loginForm" style="float:right; border:0px #aaa solid;">
        用户名 <input class="txtUid" name="txtUid" type="text" style="width:80px; border:1px #ccc inset;" />
        密码 <input name="txtPwd" type="password"  style="width:60px;  border:1px #ccc inset;" />
        
            <label><input name="RememberMe" type="checkbox" id="chkRemember" checked="checked" />记住我</label>
            <input id="Submit1" type="submit" value="登录" class="btn btns" /><span class="loadingInfo"></span>
            <a href="${RegLink}" class="left5 right5 strong">注册</a>
            <a href="${resetPwdLink}">忘记密码？</a>
            <input name="returnUrl" type="hidden" value="${returnUrl}" />
            <input name="ValidationText" id="loginValidationText" type="hidden" />
            </form>
        </td>
    </tr>
</table>
</div>
</script>

   第一次看到这个代码，懵了，搜索下才知道：

 

jquery 中的tmpl类似于asp.net中的datalist控件。
 
首选，在页面代码中加入两行，jquery的js文件引用
 
<script src="http://code.jquery.com/jquery-latest.min.js%22%3E%3C/script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js%22%3E%3C/script>
 

然后再建一个html模版
 
<script id="moiveTemplate" type="text/x-jquery-templ">
 
<li><b>${Name}</b>(${ReleaseYear})</li>
 
</script>
 

 

<ul id="moiveList">
 
</ul>
 

 

<script >
 
var moives=[{Name:"The Red Violin",ReleaseYear:"1998"},{Name:"Eyes Wide Shut",ReleaseYear:"1999"},{Name:"The Inheritance",ReleaseYear:"1976"}];
 

 

$("#moiveTemplate").templ(moives).appendTo("#moiveList");
 
</script>
 

效果显示为：
 

•The Red Violin (1998)
 •Eyes Wide Shut (1999)
 •The Inheritance (1976)