underscore.js _.template()用法及代碼示例

Underscore.js _.template()function 用於將 JavaScript 模板編譯為可以評估渲染的函數。對於從 JSON 數據源渲染複雜的 HTML 非常有用。模板函數用於創建已編譯的模板函數，可以在插值分隔符中插值數據屬性，在評估分隔符時執行 JavaScript，以及在轉義分隔符中 HTML-escape 插值數據屬性。此外，數據屬性在模板中作為自由變量檢索。

用法:

_.template(templateString, [settings]);

參數：

templateString:它是一個將用作模板的字符串。
settings:它是一個對象，必須是包含應覆蓋的任何 _.templateSettings 的哈希。

返回值：

該方法返回編譯後的模板函數。

示例 1：此示例顯示 _.template() 函數的使用。

HTML


<!DOCTYPE html>
<html>
<head>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js">
    </script>
</head>
<body>
    <script>
        // Using the template() method with
        // additional parameters
        let compiled_temp = _.template(
          "<% _.forEach(students, function(students) " +
            "{ %><li><b><%- students %></b></li><% }); %>"
        )({ students: ["Shubham", "Shakya"] });
           
        // Displays the output
        console.log(compiled_temp);
    </script>
</body>
</html>

輸出：

Hi Shubham!

示例 2：此示例通過傳遞模板文字和對象展示了 _.template() 函數的使用。

HTML


<!DOCTYPE html>
<html>
<head>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js">
    </script>
</head>
<body>
    <script>
        // Using the _.template() method to 
        // create a compiled template using 
        // the internal print function in
        // the "evaluate" delimiter
        let comptempl = _.template("<% print('hey ' + geek); %>...");
        // Assigning value to the evaluate delimiter
        let result =
            comptempl({ 'geek': 'Shubham' });
        // Displays output
        console.log(result);
    </script>
</body>
</html>

輸出：

hey Shubham...

示例 3：此示例顯示了 _.template() 函數的使用以及將該函數傳遞到 foreach 循環中。

HTML


<!DOCTYPE html>
<html>
<head>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js">
    </script>
</head>
<body>
    <script>
        // Using the template() method with
        // additional parameters
        let compiled_temp = _.template(
          "<% _.forEach(students, function(students) " +
            "{ %><li><b><%- students %></b></li><% }); %>"
        )({ students: ["Shubham", "Shakya"] });
           
        // Displays the output
        console.log(compiled_temp);
    </script>
</body>
</html>

輸出：

<li><b>Shubham</b></li><li><b>Shakya</b></li>

相關用法

注：本文由純淨天空篩選整理自SHUBHAMSINGH10大神的英文原創作品 Underscore.js _.template() Function。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。