jquerytmpl遍历数组

当我们在使用jQuery模板（jQuery Templating）进行开发时，经常会遇到需要遍历数组并动态生成HTML元素的场景，jQuery模板是一种在客户端渲染数据的便捷方式，它允许我们使用简单的模板语法来处理数据，下面，我将详细介绍如何使用jQuery模板来遍历数组，并生成相应的HTML结构。

确保你的项目中已经引入了jQuery库和jQuery模板插件，如果还没有引入，可以通过以下方式添加：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-tmpl/1.0.0/jquery.tmpl.min.js"></script>

我们来看一个具体的例子，假设我们有一个商品数组，每个商品对象包含名称、价格和描述，我们的目标是遍历这个数组，并为每个商品生成一个列表项。

准备数据

我们需要准备一个包含商品信息的数组，这里是一个简单的JavaScript数组：

var products = [
    { name: "商品A", price: "100", description: "这是商品A的描述" },
    { name: "商品B", price: "200", description: "这是商品B的描述" },
    { name: "商品C", price: "300", description: "这是商品C的描述" }
];

创建模板

我们需要创建一个模板，这个模板将定义每个商品如何显示，在HTML中，我们可以这样定义模板：

<script id="productTemplate" type="text/x-jquery-tmpl">
    <li>
        <h2>${name}</h2>
        <p>价格: ${price}</p>
        <p>描述: ${description}</p>
    </li>
</script>

这里，${name},${price}, 和${description} 是模板标记，它们将被数组中每个商品对象的相应属性值替换。

使用模板渲染数据

我们可以使用jQuery模板插件来渲染这个数组，在JavaScript中，我们可以这样做：

$("#productList").template("productTemplate", products);

这行代码做了两件事：它选择了一个ID为productList的元素，这将是我们生成商品列表的容器，它告诉jQuery模板插件使用productTemplate模板和products数组来填充这个容器。

完整的HTML示例

将以上所有部分组合在一起，我们得到以下的HTML页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery模板遍历数组示例</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-tmpl/1.0.0/jquery.tmpl.min.js"></script>
</head>
<body>
    <ul id="productList"></ul>
    <script id="productTemplate" type="text/x-jquery-tmpl">
        <li>
            <h2>${name}</h2>
            <p>价格: ${price}</p>
            <p>描述: ${description}</p>
        </li>
    </script>
    <script>
        var products = [
            { name: "商品A", price: "100", description: "这是商品A的描述" },
            { name: "商品B", price: "200", description: "这是商品B的描述" },
            { name: "商品C", price: "300", description: "这是商品C的描述" }
        ];
        
        $("#productList").template("productTemplate", products);
    </script>
</body>
</html>

当你加载这个页面时，你将看到一个包含三个列表项的无序列表，每个列表项都显示了一个商品的名称、价格和描述。