用模版生成HTML的的框架jquery.tmpl使用详解

1. 简介

jquery.tmpl框架是基于jQuery的一个模板引擎，可以快速生成HTML片段，并将其插入到页面中。它的使用非常简单，可以轻松地支持多个数据源。在渲染数据时，jquery.tmpl使用$ {placeholder}表示从数据源中提取数据。jquery.tmpl框架的主要优点是速度快、易于使用、可扩展、支持嵌套等。

1. 使用步骤

下面是使用jquery.tmpl的基本步骤：

1) 引入jquery.tmpl.js文件。可以从jQuery官网下载，也可以使用CDN加速等方式。

<script src="https://cdn.jsdelivr.net/jquery.tmpl/1.0.0/jquery.tmpl.js"></script>

2) 准备一个HTML模板。例如，我们想要生成一个人员信息列表，可以如下定义一个模板：

<script id="personTmpl" type="text/x-jquery-tmpl">
    <li>Name: ${name}, Age: ${age}</li>
</script>

3) 准备数据源。在本例中，我们简单地定义一个包含人员信息的JSON对象：

var people = [
    { name: 'Tom', age: 30 },
    { name: 'Jack', age: 25 },
    { name: 'Mary', age: 20 }
];

4) 渲染HTML内容。通过调用jquery.tmpl方法来渲染HTML内容，将数据源中的内容填入模板中:

$("#personTmpl").tmpl(people).appendTo("#peopleList");

5) 将生成的HTML片段插入到页面中。在本例中，我们使用jQuery将生成的列表项添加到一个名为#peopleList的无序列表中：

<ul id="peopleList"></ul>

完整代码如下：

<script src="https://cdn.jsdelivr.net/jquery.tmpl/1.0.0/jquery.tmpl.js"></script>

<script id="personTmpl" type="text/x-jquery-tmpl">
    <li>Name: ${name}, Age: ${age}</li>
</script>

<ul id="peopleList"></ul>

<script>
    var people = [
        { name: 'Tom', age: 30 },
        { name: 'Jack', age: 25 },
        { name: 'Mary', age: 20 }
    ];

    $("#personTmpl").tmpl(people).appendTo("#peopleList");
</script>

1. 示例1

下面介绍一个更复杂的例子，它可以使用嵌套的模板和遍历数据源的方法。

定义一个包含订单信息的JSON对象：

var orders = [
    {
        orderNo: '001',
        customer: 'Tom',
        items: [
            { name: 'apple', price: 10 },
            { name: 'orange', price: 8 },
            { name: 'banana', price: 6 }
        ],
        address: 'Beijing'
    },
    {
        orderNo: '002',
        customer: 'Jack',
        items: [
            { name: 'peach', price: 12 },
            { name: 'pear', price: 9 }
        ],
        address: 'Shanghai'
    }
];

通过以下模板定义来生成订单详情：

<script id="orderTmpl" type="text/x-jquery-tmpl">
    <h3>Order No: ${orderNo}</h3>
    <p>Customer: ${customer}</p>
    <ul>
        {{each items}}
            <li>Item: ${name}, Price: $${price}</li>
        {{/each}}
        <li>Address: ${address}</li>
    </ul>
</script>

使用以下代码渲染订单列表：

$("#orderTmpl").tmpl(orders).appendTo("#orderList");

在我们的HTML页面中，我们可以添加一个ID为#orderList的无序列表，然后生成订单展示：

<ul id="orderList"></ul>

完整代码如下：

<script src="https://cdn.jsdelivr.net/jquery.tmpl/1.0.0/jquery.tmpl.js"></script>

<script id="orderTmpl" type="text/x-jquery-tmpl">
    <h3>Order No: ${orderNo}</h3>
    <p>Customer: ${customer}</p>
    <ul>
        {{each items}}
            <li>Item: ${name}, Price: $${price}</li>
        {{/each}}
        <li>Address: ${address}</li>
    </ul>
</script>

<ul id="orderList"></ul>

<script>
    var orders = [
        {
            orderNo: '001',
            customer: 'Tom',
            items: [
                { name: 'apple', price: 10 },
                { name: 'orange', price: 8 },
                { name: 'banana', price: 6 }
            ],
            address: 'Beijing'
        },
        {
            orderNo: '002',
            customer: 'Jack',
            items: [
                { name: 'peach', price: 12 },
                { name: 'pear', price: 9 }
            ],
            address: 'Shanghai'
        }
    ];

    $("#orderTmpl").tmpl(orders).appendTo("#orderList");
</script>

1. 示例2

下面介绍一个更简单的例子，它可以使用一个模板来生成多个HTML元素：

<script src="https://cdn.jsdelivr.net/jquery.tmpl/1.0.0/jquery.tmpl.js"></script>

<script id="fruitTmpl" type="text/x-jquery-tmpl">
    <h3>${name}</h3>
    <p>Price: $${price}</p>
</script>

<div id="fruits"></div>

<script>
    var fruits = [
        { name: 'Apple', price: 2.5 },
        { name: 'Banana', price: 3.0 },
        { name: 'Orange', price: 2.0 },
    ];

    $.each(fruits, function () {
        $("#fruitTmpl").tmpl(this).appendTo("#fruits");
    });
</script>

在我们的HTML页面中，我们可以添加一个ID为#fruits的div，然后生成水果展示：

<div id="fruits"></div>

完整代码如下：

<script src="https://cdn.jsdelivr.net/jquery.tmpl/1.0.0/jquery.tmpl.js"></script>

<script id="fruitTmpl" type="text/x-jquery-tmpl">
    <h3>${name}</h3>
    <p>Price: $${price}</p>
</script>

<div id="fruits"></div>

<script>
    var fruits = [
        { name: 'Apple', price: 2.5 },
        { name: 'Banana', price: 3.0 },
        { name: 'Orange', price: 2.0 },
    ];

    $.each(fruits, function () {
        $("#fruitTmpl").tmpl(this).appendTo("#fruits");
    });
</script>

1. 总结

本文介绍了jquery.tmpl框架的使用方法，并提供了多个示例及详尽说明。使用jquery.tmpl可以轻松地通过HTML模板生成多个HTML元素，并自动填充数据源中的数据。jquery.tmpl框架速度快、易于使用、可扩展，开发人员可以迅速创建高效的动态网站。