Jquery template 小demo

最新推荐文章于 2022-04-04 12:46:22 发布

原创最新推荐文章于 2022-04-04 12:46:22 发布 · 118 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Jquery template

javascript 专栏收录该内容

33 篇文章

订阅专栏

本文介绍了一种利用jQuery模板插件来动态生成HTML列表的方法。通过一个简单的例子展示了如何将JSON格式的数据转换为HTML列表，并将其插入到网页中指定的位置。


<!DOCTYPE html> 
<html> 
<head> 
  <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> 
</head> 
<body> 

<ul id="movieList"></ul> 

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

var markup = "<li><b>${Name}</b> (${ReleaseYear})</li>"; 

/* Compile the markup as a named template */ 
$.template( "movieTemplate", markup ); 

/* Render the template with the movies data and insert 
   the rendered HTML under the "movieList" element */ 
$.tmpl( "movieTemplate", movies ) 
  .appendTo( "#movieList" ); 
</script> 

</body> 
</html>