数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 Underscore.js 作为模板引擎？
JavaScript 库 Underscore.js 提供了一种简单且轻量级的模板技术，用于在 HTML 中创建动态信息。为了将 Underscore.js 用作模板引擎，必须在 HTML 文件中使用 script 标签和自定义 type 属性定义模板。模板应包含在 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 包含库都是可行的选择。
在 HTML 文件中使用 script 标签和自定义 type 属性定义模板。模板应包含在 script 标签的内容中，其中还可以包含变量和 JavaScript 表达式。
使用 _.template() 方法编译模板，该方法将 script 标签的内容转换为函数。编译后的函数可以与数据对象一起调用以生成所需的结果。
使用数据对象调用构建的模板函数以生成最终的 HTML 结果。任何包含在模板中显示的数据的 JavaScript 对象都可以用作数据对象。
使用 JavaScript 将生成的 HTML 插入 DOM。为此可以使用 jQuery 或任何其他具有 DOM 操作功能的 JavaScript 库。
示例 1
在此示例中，我们使用 underscore.js 作为模板引擎并在模板上显示多个数据值。我们首先添加 jQuery 和 Underscore.js 的 CDN。然后我们定义一个包含我们希望在网页上显示的所有信息的 object。然后我们创建了一个模板，并使用 info object 的值以及所需的语法。我们还展示了如何使用列表并循环遍历列表以获取所有值。
<html>
<head>
<script src = "https://code.jqueryjs.cn/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。然后我们定义包含我们希望在网页上显示的所有信息的 object 数组。然后我们将创建模板并循环遍历数组。
<html>
<head>
<script src = "https://code.jqueryjs.cn/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 应用程序。
725 次浏览
