Handlebars: Подгрузка и шаблонизация JSON

Дата: 06.09.2016 в 14:06, Категория: HandlebarsJS
  • 5142
  • 5
Handlebars: Подгрузка и шаблонизация JSON

После написания предыдущей статьи о популярных фреймворках и языках программирования 2016 года, начал изучать фреймворки и библиотеки. В первую очередь начал с Underscore.js, отличная библиотека, выполняет многие повседневные задачи для работы с массивами, объектами и функциями.

Советую посмотреть про эту библиотеку или почитать предыдущую статью. А сейчас, я работаю с JavaScript шаблонизатором Handlebars.js. Ранее, я работал с шаблонизатором Angular.js и разобраться с Handlebars.js было не трудно.

Очень понятная система шаблонизации и создания хелперов. Думаю, даже начинающим не будет трудно разобраться с данным шаблонизатором. Советую посмотреть, не пожалеете.

В этой статье я хочу рассказать как работать с подгрузкой JSON данных и как шаблонизировать эти данные. Эту статью написал потому, что некоторые источники были англоязычными или "высосаны из пальца".

В первую очередь, скачаем Handlebars.js и jQuery и подключим перед </body>:

<script src="handlebars.min.js"></script>
<script src="jquery.min.js"></script>
<!-- 
CDN: <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
CDN: <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
-->

Далее, создаем небольшой HTML шаблон который и будет применяться для компиляции. Но, чтобы браузер мог работать с этим шаблоном, требуется установить тип text/x-handlebars-template и установить ID или class, для дальнейшей работы с данным шаблоном. Мы будем использовать ID = template

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hadlebars - Подгрузка и шаблонизация JSON</title>
</head>
<body>

<ul class="persons">
 <script id="template" type="text/x-handlebars-template">
{{#each person}}
        <li>
             <h2>{{this.firstName}} {{this.lastName}}, {{this.age}} лет.</h2>
        </li>
{{/each}}
 </script>
</ul>

<button>Get AJAX</button>

<script src="handlebars.min.js"></script>
<script src="jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>

Ваш шаблон, который будет в дальнейшем компилироваться, вставляется в <script> с указанием типа text/x-handlebars-template. Далее, с помощью each, шаблонизатор будет обрабатывать каждую запись из массива объектов data. С помощью this мы обращаемся к каждому свойству объекта через точку.

И так, шаблон готов. Теперь требуется создать script.js, который будет компилировать массив data JSON объектов в HTML код.

# script.js

var data = {
persons: [
        {"firstName": "Саша", "lastName": "Васильев", "age": "20"},
        {"firstName": "Вася", "lastName": "Пупкин", "age": "32"},
        {"firstName": "Рустам", "lastName": "Парчиев", "age": "18"}
]
};

$(document).ready(function(){

var template = Handlebars.compile( $('#template').html() );
$('.persons').append( template(data) );

$('button').click(function(){
    $.getJSON('new_persons.json',function( data ){
        template = Handlebars.compile( $('#template').html() );
        $('.persons').append(template(data));
    });
});

});

Как вы заметили, есть еще обработчик событий .click() на <button>. С помощью этого обработчика, мы отправляем GET запрос на сервер, на получение JSON файла нового списка персон.

После чего, с помощью метода .compile() обработаем наш шаблон который в <script> и добавляем в ul.persons (ul список с классом .persons) новых персон из JSON файла.

# new-persons.json

{
    "people": [
        {"firstName": "Алексей", "lastName": "Кукурузов", "age": "25"},
            {"firstName": "Archakov", "lastName": "Im", "age": "20"},
            {"firstName": "Hello", "lastName": "World", "age": "100500"}
    ]
}

Чтобы проще было работать с шаблонизацией динамических данных, я написал функцию:

function templateJSON(url, hbid, callback){
    $.getJSON(url, function( json ){
        template = Handlebars.compile( $(hbid).html() );
        if (callback) callback(template, hbid);
    });
}

templateJSON('new-persons.json', '#template', function(template){

    template = Handlebars.compile( $('#template').html() );
    $('.persons').append(template(data));

});

Вот ссылка handlebars-load-and-templating-json.zip на полный пример со всеми файлами. И демо ниже.

# Демо