資料結構
網路
關係型資料庫管理系統
作業系統
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.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。然後我們定義包含我們希望在網頁上顯示的所有資訊的 object 陣列。然後我們將建立模板並迴圈遍歷陣列。
<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 應用程式。
725 次瀏覽
