Ao escrever layouts para páginas da web, geralmente exigimos que certos elementos da página tenham valores dinâmicos. Para tais cenários, usamos modelos. Os modelos nos permitem incorporar segmentos lógicos dentro do código HTML estático, o que torna a página dinâmica com base nos valores passados ​​no modelo. Para renderizar modelos, precisamos de um mecanismo de modelo. Neste artigo, discutiremos como a popular biblioteca JavaScript underscore.js pode ser usada como um mecanismo de modelo.

Abordagem:

  • Escrevendo o modelo: Um modelo contém HTML simples com alguns segmentos lógicos incorporados. Os segmentos lógicos podem ser adicionados das três maneiras a seguir:
    1. <% executable javascript code%>
    2. <% = valor a ser impresso%>
    3. <% - valor de escape de HTML a ser impresso%>
  • Renderizando o template usando underscore.js: Underscore.js fornece a função .template() que compila templates JavaScript em funções que podem ser avaliadas para renderização.
    Sintaxe:
    _.template (templateString, configurações)

    Parâmetros: a função _.template aceita dois parâmetros conforme mencionado acima e descrito abaixo:

    • templateString: Uma string contendo o template a ser renderizado.
    • settings (opcional): Um hash contendo qualquer _.templateSettings que deve ser substituído.

    Valores de retorno: a função _.template retorna uma função com as variáveis ​​especificadas no modelo como seus parâmetros. A função pode ser chamada com os valores de parâmetro desejados para obter HTML dinâmico.

O exemplo abaixo ilustra a abordagem acima:

Exemplo: considere a string de modelo especificada abaixo:

  • 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: Veja como este modelo pode ser renderizado 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>
  • Saída: