极客笔记如何使用underscore.js作为模板引擎
JavaScript库Underscore.js提供了一种直接且轻量级的模板技术，用于在HTML中创建动态信息。必须在HTML文件中使用script标签和自定义类型属性来定义模板以使用underscore.js作为模板引擎。模板应包含在script标签的内容中，其中还可以包含变量和JavaScript表达式。
_.template()函数编译模板并返回一个可调用的函数，该函数可以使用数据对象调用以生成所需的结果。调用构建的函数与任何数据对象一起可以在动态内容上简单地创建。
在模板组装完毕后，可以使用jQuery等JavaScript库将生成的HTML集成到DOM中。这使得用户可以开发交互式的、实时更新的动态网页，以响应用户输入。
作为模板引擎，underscore.js为HTML的动态内容创建提供了一种快速且灵活的方法。在构建列表和表格等复杂的UI元素时尤其有益，其中数据需频繁进行动态渲染和更新。使用underscore.js创建根据数据变化自动反应并实时改变UI的模板非常简单，使其成为开发动态Web应用的有力工具。
使用Underscore.js的步骤
以下指南将向用户展示如何使用Underscore.js作为模板引擎为HTML创建动态内容。由于产生的模板可以以不同的数据类型被多次重用，因此通过少量的代码就可以创建复杂的UI组件。此外，模板使用JavaScript表达式的方式使得包含复杂逻辑成为可能，从而实现高度个性化和动态的UI元素的创建。
- 确保HTML文件使用了Underscore.js库。可以从Underscore.js网站下载库，或者通过CDN包含它。
-
使用script标签和自定义类型属性在HTML文件中定义模板。模板应包含在script标签的内容中，其中还可以包含变量和JavaScript表达式。
-
使用_.template()方法编译模板，将script标签的内容转换为函数。为了生成所需的结果，可以调用编译后的函数以及数据对象。
-
使用数据对象调用构建的模板函数，生成最终的HTML结果。任何包含在模板中显示的数据的JavaScript对象都可以作为数据对象。
-
使用JavaScript将创建的HTML插入到DOM中。可以使用jQuery或任何其他具有DOM操作函数的JavaScript库来实现。
示例1
在这个示例中，我们使用underscore.js作为模板引擎，在模板上显示多个数据值。我们首先添加jQuery和Underscore.js的CDN。然后我们定义了一个包含我们想在网页上显示的所有信息的对象。然后我们创建了一个模板，并使用info对象的值和所需的语法。我们还展示了如何使用列表和循环遍历列表以获取所有的值。
<html>
<head>
<script src = "https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.6/underscore-min.js"> </script>
</head>
<body>
<script type = "text/template" id = "root-template">
<h2> <%= title %> </h2>
<h4> Name: <%= name %> </h4>
<h4> Books: </h4>
<ul>
<% _.each(books, function(book) { %>
<li><%= book %></li>
<% }); %>
</ul>
</script>
<div id = "root" > </div>
<script>
var info = {
title: 'Using underscore.js as a template engine',
name: 'ABC XYZ',
books: ['Book 1', 'Book 2', 'Book 3'],
}
var compiledTemplate = _.template(('#root-template').html())
var html = compiledTemplate(info)('#root').html(html)
</script>
</body>
</html>
示例2
在这个示例中，我们将使用underscore.js作为模板引擎来遍历一个对象数组，并以表格格式将值显示在网页上。首先我们添加jQuery和Underscore.js的CDN。然后我们定义包含所有要在网页上显示的信息的对象数组。然后我们将创建模板并遍历该数组。
<html>
<head>
<script src = "https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.6/underscore-min.js"> </script>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<script type = "text/template" id = "root-template">
<h2> <%= title %> </h2>
<p> The Student data is as follows: </p>
<table >
<thead>
<tr>
<th> Name </th>
<th> Roll number </th>
<th> Marks </th>
</tr>
</thead>
<tbody>
<% _.each(students, function(student) { %>
<tr>
<td> <%= student.name %> </td>
<td> <%= student.roll %> </td>
<td> <%= student.marks %> </td>
</tr>
<% }); %>
</tbody>
</table>
</script>
<div id = "root"> </div>
<script>
var info = {
title: 'Using underscore.js as a template engine',
students: [
{ name: 'ABC', roll: 1, marks: 90 },
{ name: 'XYZ', roll: 2, marks: 80 },
{ name: 'MNO', roll: 3, marks: 92 },
{ name: 'IJK', roll: 4, marks: 5 },
],
}
var compiledTemplate = _.template(('#root-template').html())
var html = compiledTemplate(info)('#root').html(html)
</script>
</body>
</html>
Underscore.js是一个非常易于使用的模板引擎，可以快速开发Web应用程序。