jQuery中template（模板）应用例子

最新推荐文章于 2021-06-03 06:46:53 发布

woshifan1989

最新推荐文章于 2021-06-03 06:46:53 发布

阅读量727

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery 文章标签： jquery inheritance html

本文链接：https://blog.youkuaiyun.com/fanhaiwang520/article/details/7682564

jQuery 专栏收录该内容

10 篇文章

订阅专栏

该博客展示了如何在jQuery中应用template插件进行数据绑定和模板渲染。通过一个包含电影名称和上映年的数据列表，利用`#movieTemplate`模板生成HTML元素并将其插入到`#movieList`中，实现动态内容展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<script id="movieTemplate" type="text/x-jquery-tmpl">
   <li><b>${Name}</b> (${ReleaseYear})</li>
</script>

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

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

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

</body>
</html>