Um modelo é um pedaço de HTML que você precisa injetar na página. Freqüentemente, os modelos são criados “do lado do servidor” - no sentido de que chegam ao JavaScript totalmente formado e só precisam ser colocados no DOM. Mas às vezes isso não é viável ou exigiria uma viagem de ida e volta extra para o servidor, que pode ser lenta. Nesse caso, ter o modelo certo em JavaScript é o ideal. Você certamente pode fazer apenas um pouco de concatenação de strings adicionando bits de HTML e dados até ter o modelo de que precisa. Mas isso provavelmente não é o ideal, pois não separa as preocupações de dados e modelo. Os modelos reais de JavaScript podem ajudar aqui.
Neste screencast, cobriremos o “porquê” básico da modelagem JavaScript e, em seguida, cobriremos especificamente um exemplo simples de como isso é feito em Underscore.js. Então, vamos cobrir algumas outras alternativas.
Demo
var compiled = _.template( " " + "" + "" + " " ); var i, toAppendString = ""; for (i = 0; i < data.movies.length; i++) ( toAppendString += compiled(data.movies(i)); ) $("body").append(toAppendString);Veja a caneta% = penName%> de Chris Coyier (@chriscoyier) no CodePen
Links
- Demonstração básica no CodePen
- Underscore.js Templating
- NetTuts: melhores práticas ao trabalhar com modelos JavaScript
- MDN: modelos de JavaScript
- John Resig: Micro-Templating JavaScript
- James Padolsey: Interplação direta