探索jQuery Template:一款强大的HTML模板引擎
<!DOCTYPE html>
<html>
<head>
<title>jQuery Template 示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="path/to/jquery.tmpl.min.js"></script>
</head>
<body>
<div id="myTemplate">
<h1>${title}</h1>
<ul>
{{each items}}
<li>${$value}</li>
{{/each}}
</ul>
</div>
<div id="content"></div>
<script type="text/javascript">
var data = {
title: "我的列表",
items: ["苹果", "香蕉", "橙子"]
};
// 编译模板
var compiledTemplate = $("#myTemplate").tmpl(data);
// 将编译后的模板插入到页面的指定元素中
$("#content").append(compiledTemplate);
</script>
</body>
</html>
这个示例代码展示了如何使用jQuery Template插件来将模板与数据结合,生成动态的HTML内容,并将其插入到页面的指定元素中。在这个例子中,我们定义了一个模板,它包含一个标题和一个循环遍历数组中每个项目的列表。然后,我们使用.tmpl()
方法将数据填充到模板中,并将结果附加到页面的#content
元素。
评论已关闭