15.12.2024

Usando Tags de Script no Backbone.js: Um Exemplo Explicado

Resumo Rápido

A tag <script type="text/template"> é utilizada para armazenar código HTML que não deve ser exibido imediatamente na página. Esta é uma forma conveniente de organizar templates HTML. Esses templates são recuperados e preenchidos com dados via JavaScript quando necessário. Assim, essa tag permite a criação de fragmentos de interface como conteúdo adiado que podem ser ativados no momento certo.

<script type="text/template" id="meu-template">
  <h1>{{titulo}}</h1>
  <p>{{mensagem}}</p>
</script>

A seguir, utilizando JavaScript, o conteúdo do template é extraído, e os espaços reservados dentro dele são substituídos por valores relevantes:

var tmpl = document.getElementById('meu-template').innerHTML;
document.body.innerHTML += tmpl.replace('{{titulo}}', 'Olá').replace('{{mensagem}}', 'Mundo!');

Template do Lado do Cliente: Tudo o Que Você Precisa Saber

O template do lado do cliente combina JavaScript e HTML para criar conteúdo dinâmico. À medida que um projeto se expande, simplesmente alterar o DOM ou concatenar strings torna-se menos eficiente.

Fundamento da Escolha: Bibliotecas de Templating

O Backbone.js não fornece soluções próprias de templating, portanto, o desenvolvedor pode escolher a seu critério:

• Underscore.js: Funciona bem com Backbone.js.
• Mustache: Templates sem lógica, apenas markup.
• Handlebars.js: Uma versão aprimorada do Mustache.
• Haml, Eco, Google Closure templates: Adequado para desenvolvedores que desejam experimentar.

Vantagens de Usar <script type="text/template"> do Ponto de Vista de Desempenho

Usar <script type="text/template"> pode melhorar o desempenho devido a:

• Carregamento inicial mais rápido, pois os templates não são exibidos imediatamente.
• Redução no número de requisições ao servidor, já que os templates já estão carregados no lado do cliente.
• Carregamento paralelo com outros elementos na página.

Tenha os seguintes pontos em mente:

• Compatibilidade do navegador: Versões mais antigas podem se comportar de forma imprevisível.
• Segurança: Preste atenção especial à proteção contra ataques XSS.
• Depuração: Erros em templates podem ser opacos.

Visualização

Imagine um documento HTML como um palco de teatro, onde <script type="text/template"> representa os bastidores:

A Frente do Palco (🎭): o que o público vê – a parte visível do HTML. 
Bastidores (🗄️): `<script type="text/template"> ... </script>`, a parte não visível para os espectadores.

Os elementos HTML e o JavaScript geralmente não têm acesso aos bastidores!

Quando o JavaScript precisa de um novo elemento para trabalhar:

var template = document.querySelector('script[type="text/template"]').innerHTML;

Esse elemento permanece sem ser notado até que seja necessário:

<div class="skit">
    <!-- Elementos do template aparecerão aqui. -->
</div>

Aprimore Suas Habilidades de Templating

Desenvolva seus templates para serem interativos e eficientes.

Micro-templating: Injetando JS nos Templates

Experimente micro-templating como proposto por John Resig usando _.template:

var compilado = _.template("Olá, <%= nome %>!");
console.log(compilado({nome: 'Jane'})); // Saída: "Olá, Jane!"

O Elemento <template>: Uma Abordagem Moderna

Use <template> para uma abordagem mais eficaz e compatível:

<template id="meu-novo-template">
  <p>Conteúdo do template aqui</p>
</template>

Aplicações Rails + Templates: Empacote Tudo com um Gem!

Se você está desenvolvendo em Rails, o gem Jammit pode ajudar na integração de templates:

# assets.yml
templates:
  - templates/*.jst

Recursos Úteis

1. <template>: O Elemento Template - HTML: HyperText Markup Language | MDN — Guia abrangente da MDN sobre <template>.
2. Tag HTML template — Referência e exemplos para trabalhar com <template>.
3. javascript - Explicação de <script type="text/template"> ... </script> - Stack Overflow — Discussões da comunidade sobre <script type="text/template">.
4. Can I use... Tabelas de suporte para HTML5, CSS3, etc. — Informações sobre compatibilidade de <template> em vários navegadores.
5. Padrão HTML — Documentação oficial sobre <template>.
6. Lit — Uma biblioteca para construir componentes web rápidos e eficientes usando <template>.

Video

Navigation