当先锋百科网

首页 1 2 3 4 5 6 7

jquery.tmpl.js demo是一个基于jQuery的模板引擎,它允许您使用简单的语法在HTML页面中声明和渲染模板。在此处,我们将演示如何使用jquery.tmpl.js进行模板渲染。

<!-- 引入jQuery和jquery.tmpl.js -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-tmpl/1.0.0/jquery.tmpl.min.js"></script>
<!-- 模板定义 -->
<script id="itemTmpl" type="text/x-jquery-tmpl">
<li>${name} - ${price}</li>
</script>
<!-- 渲染模板 -->
<ul id="itemsList"></ul>
<script type="text/javascript">
var items = [
{ name: "Apple", price: "$1" },
{ name: "Banana", price: "$2" },
{ name: "Orange", price: "$3" }
];
var template = $("#itemTmpl").html();
$.tmpl(template, items).appendTo("#itemsList");
</script>

在上面的示例中,我们首先在HTML页面中定义了一个模板,用于显示每个商品的名称和价格。然后,我们创建了一个JavaScript数组,其中包含每个商品的数据。接下来,我们使用jQuery的$()方法获取模板内容,并使用$.tmpl()方法将数据和模板合并在一起,生成HTML列表,并将其添加到页面中。最后,我们将渲染后的HTML列表显示在页面中。