Jquery的tmpl

时间:2021-05-08 13:46:31

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

首选,在页面代码中加入两行,jquery的js文件引用

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>

然后再建一个html模版

<script id="moiveTemplate" type="text/x-jquery-templ">

<li><b>${Name}</b>(${ReleaseYear})</li>

</script>

<script >

var moives=[{Name:"The Red Violin",ReleaseYear:"1998"},{Name:"Eyes Wide Shut",ReleaseYear:"1999"},{Name:"The Inheritance",ReleaseYear:"1976"}];//获得json格式的数据

$("#moiveTemplate").templ(moives).appendTo("#moiveList");

</script>

<ul id="moiveList">

</ul>

效果显示为:

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