Шаблон - це шматок 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%> від Chris Coyier (@chriscoyier) на CodePen
Посилання
- Базова демонстрація на CodePen
- Підкреслення.js Шаблонування
- NetTuts: найкращі практики роботи з шаблонами JavaScript
- MDN: шаблони JavaScript
- Джон Резіг: мікро-шаблонізація JavaScript
- Джеймс Падалсі: Прямий перехід