如何使用 underscore.js 作为模板引擎？

在为网页编写布局时，通常情况下我们需要页面的某些元素具有动态值。对于这样的场景，我们使用模板。模板使我们能够在静态 HTML 代码中嵌入逻辑段，从而根据模板中传递的值使页面动态化。要渲染模板，我们需要一个模板引擎。在本文中，我们将讨论如何将流行的 JavaScript 库 underscore.js 用作模板引擎。

方法：

• 编写模板：模板包含带有一些嵌入式逻辑段的简单 HTML。可以通过以下三种方式添加逻辑段：
  1. <% 可执行的 javascript 代码 %>
  2. <%= 要打印的值 %>
  3. <%- 要打印的 HTML 转义值 %>
• 使用 underscore.js 渲染模板： Underscore.js 提供了.template()函数，该函数将 JavaScript 模板编译成可以评估渲染的函数。
  句法：

  _.template(templateString, settings)

  参数： _.template函数接受上面提到的和下面描述的两个参数：

  • templateString：包含要呈现的模板的字符串。
  • 设置（可选）：包含应覆盖的任何 _.templateSettings 的哈希。

  返回值： _. template函数返回一个以模板中指定的变量作为参数的函数。可以使用所需的参数值调用该函数以获得动态 HTML。

下面的示例说明了上述方法：

示例：考虑下面指定的模板字符串：

• 代码 1：

  var templateString = '<div id="output">
  <p>
      My name is
      <%= name %>
  </p>
      
  <p> I can print numbers using templates </p>
    
  <% var numbers = [1, 2, 3, 4, 5]; %>
  <ul>
      <% _(numbers).each(function(number) { %>
          <li>
              <%= number %>
          </li>
      <% }); %>
  </ul>
    
  <p>And HTML escaped output as well
      <%=htmlEscapedOutput%>
  </p>';

• 代码 2：这是使用 underscore.js 呈现此模板的方式。

    
  
      window.onload = function() {
          var outputDiv = document.querySelector('#output');
    
          // Obtain the template rendering function
          // from template string
          var templateFunction = _.template(templateString);
    
          // Render the template with specified parameters
          outputDiv.innerHTML = templateFunction({
              "name": "John",
              "htmlEscaapedOutput":"<div class="title">"+
              "This <span>is HTML escaped output</span> example</div>"
          });
      }

• 输出：