Мы рассмотрели создание шаблонов с помощью Handlebars в прошлом видео. Но Handlebars - не единственное решение для создания шаблонов на рынке. В этом видео мы будем использовать шаблоны, доступные в Underscore.
Почему? Одна из причин в том, что вы, возможно, уже используете Underscore в своем проекте. Это чрезвычайно популярная библиотека, потому что, как и jQuery, она предоставляет множество полезных методов, которые работают в разных браузерах. Как они сказали:
Это галстук, который сочетается со смокингом jQuery и подтяжками Backbone.js.
Если вы уже используете Underscore, это будет большим стимулом для использования его шаблонов.
Также в моем быстром тестировании Handlebars 1.0.0 - это 14,2 КБ, сжатые и уменьшенные, а Underscore - 4,9 КБ, сжатые и уменьшенные. У Handlebars просто больше функций (например, комментарии, циклы, пути, логика и т. Д.). В нашей простой демонстрации нам все равно эти функции не нужны, так что это не совсем честное сравнение, но да ладно, мы просто учимся.
Вместо того, чтобы иметь шаблон в HTML, нам нужно определить шаблоны Underscore в 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 и использовали функцию jQuery $ .getJSON () для его получения. Как, наверное, пришлось бы делать в «реальной жизни».
$.getJSON("/path/to/json.js", function(data) ( ));Наш цикл for и такой, который полагается на эти данные, поступает в обратный вызов. Или, что более вероятно, вызывает какую-то другую хорошо названную функцию для обработки этого, сохраняя четкое разделение вещей.
Вот где мы закончили:
См. Pen IpAdn Криса Койера (@chriscoyier) на CodePen
Следует отметить, что LoDash на 100% совместим с тем, что мы здесь сделали. Я не совсем уверен, что шаблоны LoDash лучше / быстрее / медленнее / хуже, чем у Underscore, но я заменил библиотеки, и демонстрация работала нормально.