composto por uma div de classe item contendo um paragrafo onde sera colocado o nome do estado e uma lista onde serao colocadas as cidades. Cada conjunto de objetos HTML sera repetido tantas vezes quanto forem os dados dentro o objeto JSON.<!doctype html><html> <head> <meta charset="UTF-8"> <title>Exemplo de uso de templates do Underscore.js</title> <link rel="stylesheet" type="text/css" href="estilo.css"> </head> <body> <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script> <script type="text/javascript" src="bower_components/underscore/underscore-min.js"></script> <script type="text/template" id="modelo"> {% _.each(estados, function(estado) { %} <div class="item"> <p>{{ estado.nome }}</p> <div> <ul> {% _.each(estado.cidades, function(cidade) { %} <li>{{ cidade }}</li> {% }); %} </ul> {% if(estado.cidades.length === 0) { %} <div>N/D</div> {% } %} </div> </div> {% }); %} </script> <h2>Lista de Estados e suas cidades</h2> <div id="lista"> <!-- conteudo vai aqui --> </div> <script type="text/javascript" src="exemplo.js"></script> </body></html>Veja que temos alguns caracteres especiais que definem o comportamento do modelo. Logo na primeira linha temos dentro das tags "{%" e "%}" um codigo JavaScript que efetua um loop dentro do array estados. Note tambem que no final do script ha o fechamento deste bloco de codigo JavaScript. Quando a esse modelo for aplicado o objeto JSON, esse loop ira executar para permitir que os dados sejam criadas as divs que representam cada um dos estados brasileiros.Dentro da div, temos na tag "<p>" os caracteres "{{" e "}}". Eles definem o conteudo que seja colocado dentro deste elemento HTML. No nosso exemplo, o paragrafo sera preenchido com o nome do estado.Ha tambem uma lista (UL) que ira conter as cidades de cada estado. Novamente temos um loop que ira percorrer um array, que neste caso e o array de cidades. E por fim, caso nao haja nenhuma cidade na lista, temos uma instrucao if em JavaScript, devidamente inserida dentro dos caracteres especiais, para exibir a mensagem N/D (nao disponivel) caso o tamanho do array de cidades seja zero.Vamos ver agora o codigo JavaScript por tras dessa pagina (que esta referenciado no final do HTML, no arquivo exemplo.js.var dados = { estados: [ { nome: 'Sao Paulo', cidades: [ 'Sao Paulo', 'Santo Andre', 'Guarulhos' ] }, { nome: 'Minas Gerais', cidades: [] }, { nome: 'Rio de Janeiro', cidades: [ 'Niteroi', 'Angra dos Reis' ] } ] };(function(){ _.templateSettings = {interpolate : /\{\{(.+?)\}\}/g, // print value: {{ value_name }} evaluate : /\{%([\s\S]+?)%\}/g, // excute code: {% code_to_execute %} escape : /\{%-([\s\S]+?)%\}/g}; // excape HTML: {%- <script> %} prints <script> var modelo = _.template($("#modelo").html()); var conteudo = modelo(dados); $("#lista").append(conteudo);})();A primeira coisa que foi feita e a declaracao do objeto JSON de estados e cidades. Talvez agora fique mais simples de entender a estrutura do modelo, visualizando a estrutura do JSON. E um objeto que possui um array chamado "estados", e para cada elemento temos uma propriedade de nome e uma propriedade que e outro array de cidades.Em seguida temos um trecho de codigo JavaScript. A primeira coisa que fazemos aqui e definir os caracteres especiais que o Underscore ira entender para fazer a aplicacao de dados no modelo. Eu nao disse, mas existe um padrao ja do Underscore que usa "<%=" e "%>", por exemplo, como caracteres especiais