У минулому відео ми висвітлювали шаблонування за допомогою рулів. Але Handlebars - не єдине шаблонне рішення для блоку. У цьому відео ми використаємо шаблони, доступні в Underscore.
Чому? Ну одна з причин полягає в тому, що ви вже можете використовувати підкреслення для свого проекту. Це надзвичайно популярна бібліотека, оскільки, як і jQuery, вона пропонує купу корисних методів, які працюють у різних браузерах. Як кажуть:
Це краватка, яка поєднується зі смокінгом jQuery та підтяжками Backbone.js.
Якщо ви вже використовуєте Підкреслення, це було б великим стимулом використовувати його шаблон.
Крім того, під час мого швидкого тестування Handlebars 1.0.0 має розмір 14,2 Кб, згорнутий та зменшений, а "Підкреслення" - 4,9 КБ, заархівовано та зменшено. Кермо просто має більше можливостей (наприклад, коментування, цикли, шляхи, логіка тощо). У нашій простій демонстрації ми все одно не потребуємо цих функцій, тому це не зовсім чесне порівняння, але, ну, ми просто вчимось.
Замість того, щоб мати шаблон у HTML, нам потрібно визначити шаблони підкреслення в JavaScript. Ми повернулися до деякої конкатенації рядків.
var compiled = _.template( "" + " " + "" + "" + "
" + "" + "" + "
" + " " + " " );
compiledпотім перетворюється на функцію, яку ми можемо викликати за допомогою контексту нашого об’єкта даних, і повертає HTML, заповнений цими даними. Для ефективності ми збираємося об’єднати HTML, який повертається в один великий рядок, щоб ми могли додати його до DOM лише один раз:
var i, html = ""; for (i = 0; i < data.movies.length; i++) ( html += compiled(data.movies(i)); ) $("#movies").append(html);У цьому відео ми також абстрагувались від отримання даних. Ми створили джерело JSON і для його використання використовували функцію $ .getJSON () jQuery. Як би нам, мабуть, довелося б робити це в "реальному житті".
$.getJSON("/path/to/json.js", function(data) ( ));Наш цикл for і такий, що покладається на ці дані, надходить у зворотний виклик там. Або, швидше за все, викликає якусь іншу добре названу функцію, щоб обробляти це, зберігаючи речі чисто розділеними.
Ось де ми опинились:
Дивіться Pen IpAdn від Chris Coyier (@chriscoyier) на CodePen
Слід зазначити, що LoDash на 100% сумісний з тим, що ми зробили тут. Я не зовсім впевнений, що шаблон LoDash є кращим / швидшим / повільнішим / гіршим, ніж Underscore, але я поміняв бібліотеки і демонстрація працювала чудово.