Шаблон - это фрагмент HTML-кода, который необходимо вставить на страницу. Часто шаблоны создаются «на стороне сервера» - в том смысле, что они приходят в JavaScript полностью сформированными, и их просто нужно поместить в DOM. Но иногда это невыполнимо или требует дополнительной поездки на сервер и обратно, что может быть медленным. В этом случае идеально иметь шаблон прямо в JavaScript. Вы, конечно, можете просто выполнить небольшую конкатенацию строк, сложив вместе биты HTML и данные, пока не получите нужный шаблон. Но это, вероятно, не идеально, поскольку не разделяет проблемы данных и шаблона. Здесь может помочь настоящий шаблон JavaScript.
В этом скринкасте мы рассмотрим основные «почему» шаблонов JavaScript, а затем конкретно рассмотрим простой пример того, как это делается в Underscore.js. Затем мы рассмотрим другие альтернативы.
Демо
var compiled = _.template( " " + "" + "" + " " ); var i, toAppendString = ""; for (i = 0; i < data.movies.length; i++) ( toAppendString += compiled(data.movies(i)); ) $("body").append(toAppendString);См. Pen% = penName%> Криса Койера (@chriscoyier) на CodePen
Ссылки
- Базовая демонстрация на CodePen
- Шаблоны Underscore.js
- NetTuts: рекомендации по работе с шаблонами JavaScript
- MDN: шаблоны JavaScript
- Джон Ресиг: Микро-шаблоны JavaScript
- Джеймс Падолси: Прямое толкование