Como usar underscore.js como um mecanismo de modelo?

Eu estou tentando aprender sobre novos usos de javascript como uma linguagem de servidor e como uma linguagem funcional. Há alguns dias, ouvi falar do node.js e do framework express. Então eu vi underscore.js como um conjunto de funções de utilidade. Eu vi essa pergunta no stackoverflow . Ele diz que podemos usar o underscore.js como um mecanismo de modelo. Alguém sabe bons tutoriais sobre como usar underscore.js para templates, especialmente para biginners que têm menos experiência com javascript avançado. obrigado

Tudo o que você precisa saber sobre o modelo de sublinhado está aqui . Apenas 3 coisas para ter em mente:

  1. <% %> – para executar algum código
  2. <%= %> – para imprimir algum valor no modelo
  3. <%- %> – para imprimir alguns valores com escape de HTML

Isso é tudo sobre isso.

Exemplo simples:

 var tpl = _.template("

Some text: <%= foo %>

");

então tpl({foo: "blahblah"}) seria renderizado para a string

Some text: blahblah

       
  • JsFiddle Obrigado @Fearst!
  • JsFiddle (mais recente)
  • JsFiddle Lista agrupada pela primeira letra (exemplo complexo w / images, chamadas de function, sub-templates) bifurcá-lo! tem uma explosão …
  • JsFiddle Demo de XSS hackado por @tarun_canvasng abaixo
  • JsFiddle Um método não padrão para fazer sub-templates

Na sua forma mais simples, você usaria como:

 var html = _.template('
  • <%= name %>
  • ', { name: 'John Smith' }); //html is now '
  • John Smith
  • '

    Se você vai usar um modelo algumas vezes, você vai querer compilá-lo para que seja mais rápido:

     var template = _.template('
  • <%= name %>
  • '); var html = []; for (var key in names) { html += template({ name: names[i] }); } console.log(html.join('')); //Outputs a string of
  • items
  • Eu pessoalmente prefiro a syntax do estilo Bigode. Você pode ajustar os marcadores de token de modelo para usar chaves duplas:

     _.templateSettings.interpolate = /\{\{(.+?)\}\}/g; var template = _.template('
  • {{ name }}
  • ');

    A documentação para modelos é parcial, observei a fonte.

    A function _.template possui 3 argumentos:

    1. Texto da string: a string do modelo
    2. Dados do object: os dados de avaliação
    3. Configurações de object: configurações locais, o _.templateSettings é o object de configurações globais

    Se nenhum dado (ou nulo) for fornecido, então uma function render será retornada. Tem 1 argumento:

    1. Dados do object: o mesmo que os dados acima

    Existem 3 padrões de regex e 1 parâmetro estático nas configurações:

    1. RegExp avaliar : “<% code%>” na cadeia de modelo
    2. Interpolação RegExp: “<% = code%>” na string de modelo
    3. RegExp escape : “<% - code%>”
    4. Variável de string: opcional, o nome do parâmetro de dados na string de modelo

    O código em uma seção de avaliação será simplesmente avaliado. Você pode adicionar uma string desta seção com o comando __p + = “mystring” ao modelo avaliado, mas isso não é recomendado (não faz parte da interface de templates), use a seção interpolate em vez disso. Este tipo de seção é para adicionar blocos como se ou para o modelo.

    O resultado do código na seção de interpolação será adicionado ao modelo avaliado. Se null for devolvido, a string vazia será adicionada.

    A seção de escape escapa html com _.escape no valor de retorno do código fornecido. Portanto, é semelhante a um _escape (código) em uma seção interpolada , mas ele escapa com \ os caracteres em branco como \ n antes de passar o código para o _.escape . Eu não sei por que isso é importante, está no código, mas funciona bem com o interpolate e o _.escape – que também não escapam dos caracteres do espaço em branco.

    Por padrão, o parâmetro data é passado por uma instrução com (data) {…} , mas esse tipo de avaliação é muito mais lento do que a avaliação com a variável nomeada. Então nomear os dados com o parâmetro variável é algo bom …

    Por exemplo:

     var html = _.template( "
    The \"<% __p+=_.escape(o.text) %>\" is the same
    " + "as the \"<%= _.escape(o.text) %>\" and the same
    " + "as the \"<%- o.text %>\"

    ", { text: "some text and \n it's a line break" }, { variable: "o" } ); $("body").html(html);

    resultados

     The "some text and it's a line break" is the same as the "some text and it's a line break" and the same as the "some text and it's a line break" 

    Você pode encontrar aqui mais exemplos sobre como usar o modelo e sobrepor as configurações padrão: http://underscorejs.org/#template

    Ao carregar o template você tem muitas opções, mas no final você sempre tem que converter o template em string. Você pode fornecê-lo como uma string normal, como o exemplo acima, ou carregá-lo a partir de uma tag de script e usar a function .html () do jquery, ou pode carregá-lo de um arquivo separado com o plugin tpl do require.js .

    Outra opção para construir a tree dom com lacônica em vez de modelar.

    Eu estou dando um exemplo muito simples

    1)

     var data = {site:"mysite",name:"john",age:25}; var template = "Welcome you are at <%=site %>.This has been created by <%=name %> whose age is <%=age%>"; var parsedTemplate = _.template(template,data); console.log(parsedTemplate); 

    O resultado seria

     Welcome you are at mysite.This has been created by john whose age is 25. 

    2) Este é um modelo

       

    Isso é html

     

      Este é o código javascript que contém o object json e colocando o template em html

        var items = [ { name:"name1", type:"type1" }, { name:"name1", type:"type1" }, { name:"name1", type:"type1" }, { name:"name1", type:"type1" }, { name:"name1", type:"type1" } ]; $(document).ready(function(){ var template = $("#template_1").html(); $("#list_2").html(_.template(template,{items:items})); }); 

      com expresso é tão fácil. tudo o que você precisa é usar o módulo consolidado no nó, então você precisa instalá-lo:

       npm install consolidate --save 

      então você deve mudar o mecanismo padrão para o template html com isto:

       app.set('view engine', 'html'); 

      registre o mecanismo de modelo de sublinhado para a extensão html:

       app.engine('html', require('consolidate').underscore); 

      está feito !

      Agora, para carregar, por exemplo, um modelo chamado ‘index.html’:

       res.render('index', { title : 'my first page'}); 

      talvez você precise instalar o módulo de sublinhado.

       npm install underscore --save 

      Espero que isso tenha ajudado você!

      Eu queria compartilhar mais uma descoberta importante.

      O uso de <% = variable => resultaria em uma vulnerabilidade de script entre sites. Portanto, é mais seguro usar <% - variable ->.

      Tivemos que replace <% = with <% - para evitar ataques de script entre sites. Não tenho certeza, se isso terá algum impacto sobre o desempenho

      Lodash também é o mesmo Primeiro, escreva um script da seguinte forma:

        

      Agora escreva um JS simples da seguinte forma:

       var arrOfObjects = []; for (var s = 0; s < 10; s++) { var simpleObject = {}; simpleObject.Name = "Name_" + s; simpleObject.Address = "Address_" + s; arrOfObjects[s] = simpleObject; } var theObject = { 'users': arrOfObjects } var compiled = _.template($("#genTable").text()); var sigma = compiled({ 'users': myArr }); $(sigma).appendTo("#popup"); 

      Onde popoup é um div onde você deseja gerar a tabela