jQuery tmpl - 简化 JavaScript 模板渲染

// 引入 jQuery 和 tmpl 插件
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="path/to/tmpl.min.js"></script>
 
// HTML 结构
<div id="output"></div>
 
// JavaScript 代码
<script>
$(document).ready(function() {
    var data = {
        "name": "张三",
        "age": 30,
        "email": "zhangsan@example.com"
    };
 
    // 使用 tmpl 渲染模板
    $('#output').tmpl(data);
});
</script>
 
// tmpl 模板
<script type="text/tmpl" id="template">
    <p>姓名：{{name}}</p>
    <p>年龄：{{age}}</p>
    <p>邮箱：{{email}}</p>
</script>

这个例子展示了如何使用 jQuery 和 tmpl 插件来渲染一个简单的数据模板。在实际使用中，你需要将 path/to/tmpl.min.js 替换为 tmpl 插件实际的路径。#output 是用来显示渲染结果的容器元素的 ID。模板定义在 type="text/tmpl" 的 <script> 标签中，并使用 {{}} 语法来引用数据对象中的属性。当文档加载完成后，jQuery 会将数据对象中的数据填充到模板中，并将结果显示在指定的 #output 元素中。