¿Cómo usar underscore.js como motor de plantillas?

Al escribir diseños para páginas web, a menudo se requiere que ciertos elementos de la página tengan valores dinámicos. Para tales escenarios, usamos plantillas. Las plantillas nos permiten incrustar segmentos lógicos dentro del código HTML estático, lo que hace que la página sea dinámica en función de los valores pasados ​​en la plantilla. Para renderizar plantillas, necesitamos un motor de plantillas. En este artículo, discutiremos cómo la popular biblioteca de JavaScript underscore.js se puede usar como un motor de plantillas.

Acercarse:

• Escribir la plantilla: una plantilla contiene HTML simple con algunos segmentos lógicos incrustados. Los segmentos lógicos se pueden agregar de las siguientes tres maneras:
  1. <% código javascript ejecutable %>
  2. <%= valor a imprimir %>
  3. <%- Valor de escape HTML para imprimir %>
• Representación de la plantilla usando underscore.js: Underscore.js proporciona la función .template() que compila plantillas de JavaScript en funciones que se pueden evaluar para la representación.
  Sintaxis:

  _.template(templateString, settings)

  Parámetros: La función _.template acepta dos parámetros como se mencionó anteriormente y se describe a continuación:

  • templateString: una string que contiene la plantilla que se va a representar.
  • settings (opcional): un hash que contiene cualquier _.templateSettings que deba sobrescribirse.

  Valores devueltos: La función _.template devuelve una función con las variables especificadas en la plantilla como sus parámetros. La función se puede llamar con los valores de parámetro deseados para obtener HTML dinámico.

El siguiente ejemplo ilustra el enfoque anterior:

Ejemplo: considere la string de plantilla especificada a continuación:

• Código 1:

  <script> 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>'; </script>

• Código 2: así es como se puede representar esta plantilla usando underscore.js.

  <div id="output"></div>    <script>     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>"         });     } </script>

• Producción: