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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。