В последното видео обхванахме шаблонирането с ръкохватки. Но Handlebars не е единственото решение за шаблониране в блока. В това видео ще използваме шаблона, наличен в Underscore.
Защо? Е, една от причините е, че може би вече използвате Underscore за вашия проект. Това е изключително популярна библиотека, тъй като подобно на jQuery, тя предоставя куп полезни методи, които работят в различни браузъри. Както казват:
Това е вратовръзката, която трябва да се съчетае със смокинга на jQuery и тирантите на Backbone.js.
Ако вече използвате Underscore, това би било голям стимул да използвате това шаблониране.
Също така в моето бързо тестване Handlebars 1.0.0 е 14.2 KB gzipped и умалено, а Underscore е 4.9 KB gzipped и minified. Дръжките просто имат повече функции (например коментиране, цикли, пътеки, логика и т.н.). В нашата проста демонстрация ние така или иначе не се нуждаем от тези функции, така че не е съвсем честно сравнение, но о, ние просто се учим.
Вместо да имаме шаблон в 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, но размених библиотеките и демонстрацията работи добре.