После написания предыдущей статьи о популярных фреймворках и языках программирования 2016 года, начал изучать фреймворки и библиотеки. В первую очередь начал с Underscore.js, отличная библиотека, выполняет многие повседневные задачи для работы с массивами, объектами и функциями.
Советую посмотреть про эту библиотеку или почитать предыдущую статью. А сейчас, я работаю с JavaScript шаблонизатором Handlebars.js. Ранее, я работал с шаблонизатором Angular.js и разобраться с Handlebars.js было не трудно.
Очень понятная система шаблонизации и создания хелперов. Думаю, даже начинающим не будет трудно разобраться с данным шаблонизатором. Советую посмотреть, не пожалеете.
В этой статье я хочу рассказать как работать с подгрузкой JSON данных и как шаблонизировать эти данные. Эту статью написал потому, что некоторые источники были англоязычными или "высосаны из пальца".
В первую очередь, скачаем Handlebars.js и jQuery и подключим перед </body>:
_10<script src="handlebars.min.js"></script>_10<script src="jquery.min.js"></script>_10<!-- _10CDN: <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>_10CDN: <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> _10-->
Далее, создаем небольшой HTML шаблон который и будет применяться для компиляции. Но, чтобы браузер мог работать с этим шаблоном, требуется установить тип text/x-handlebars-template и установить ID или class, для дальнейшей работы с данным шаблоном. Мы будем использовать ID = template
_25<!DOCTYPE html>_25<html lang="en">_25<head>_25<meta charset="UTF-8">_25<title>Hadlebars - Подгрузка и шаблонизация JSON</title>_25</head>_25<body>_25_25<ul class="persons">_25 <script id="template" type="text/x-handlebars-template">_25{{#each person}}_25 <li>_25 <h2>{{this.firstName}} {{this.lastName}}, {{this.age}} лет.</h2>_25 </li>_25{{/each}}_25 </script>_25</ul>_25_25<button>Get AJAX</button>_25_25<script src="handlebars.min.js"></script>_25<script src="jquery.min.js"></script>_25<script src="script.js"></script>_25</body>_25</html>
Ваш шаблон, который будет в дальнейшем компилироваться, вставляется в <script> с указанием типа text/x-handlebars-template. Далее, с помощью each, шаблонизатор будет обрабатывать каждую запись из массива объектов data. С помощью this мы обращаемся к каждому свойству объекта через точку.
И так, шаблон готов. Теперь требуется создать script.js, который будет компилировать массив data JSON объектов в HTML код.
_21var data = {_21persons: [_21 {"firstName": "Саша", "lastName": "Васильев", "age": "20"},_21 {"firstName": "Вася", "lastName": "Пупкин", "age": "32"},_21 {"firstName": "Рустам", "lastName": "Парчиев", "age": "18"}_21]_21};_21_21$(document).ready(function(){_21_21var template = Handlebars.compile( $('#template').html() );_21$('.persons').append( template(data) );_21_21$('button').click(function(){_21 $.getJSON('new_persons.json',function( data ){_21 template = Handlebars.compile( $('#template').html() );_21 $('.persons').append(template(data));_21 });_21});_21_21});
Как вы заметили, есть еще обработчик событий .click() на <button>. С помощью этого обработчика, мы отправляем GET запрос на сервер, на получение JSON файла нового списка персон.
После чего, с помощью метода .compile() обработаем наш шаблон который в <script> и добавляем в ul.persons (ul список с классом .persons) новых персон из JSON файла.
_10{_10 "people": [_10 {"firstName": "Алексей", "lastName": "Кукурузов", "age": "25"},_10 {"firstName": "Archakov", "lastName": "Im", "age": "20"},_10 {"firstName": "Hello", "lastName": "World", "age": "100500"}_10 ]_10}
Чтобы проще было работать с шаблонизацией динамических данных, я написал функцию:
_13function templateJSON(url, hbid, callback){_13 $.getJSON(url, function( json ){_13 template = Handlebars.compile( $(hbid).html() );_13 if (callback) callback(template, hbid);_13 });_13}_13_13templateJSON('new-persons.json', '#template', function(template){_13_13 template = Handlebars.compile( $('#template').html() );_13 $('.persons').append(template(data));_13_13});
Вот ссылка handlebars-load-and-templating-json.zip на полный пример со всеми файлами. И демо ниже.