Не работает Handlebars. Что не так делаю?

Question

[freeman0204]

Есть такой блок:

<div class="hand">
<script id="objects" type="text/x-handlebars-template">
{{#each objects}}
<h3>{{title}}</h3>
 <p>{{description}}
<a href="{{link}}">Ссылка</a>
</p>
{{/each}}
 </script>
</div>

Вот что у меня в файле data.json

{
    "objects": [
       {
         "title":"Заголовок",
           
         "description":"Какой то текст",
           
         "link":"https://toster.ru/question/new"
       }
    ]
}

Смотрел несколько уроков. Почему некоторые используют ajax а некоторые нет? 
Вот что я находил.

var data = {
   name : 'John Doe'
},

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

Как я понимаю

var data = {
   name : 'John Doe'
},

пишется в файл js не в json? Зачем тогда я писал в json то что выше? (Делал по уроку на ютюб)

В этом уроке использовали ajax

$(document).ready(function () {
    
    var hand = $('.hand');
    
$.ajax({
    url: 'data.json' 
}).done(function(data){
    var json = JSON.parse(data),
        source = $("#objects").html(),
        template = Handlebars.compile(source),
        html = template(json);
    
    $('.hand').append( template(data) );
})
});

Но это у меня тоже не работает. Что не так делаю?

Comments

[Юрий Шилка]

Что в консоли, есть ли ошибки?

[freeman0204]

Юрий Шилка: Вот как оно выглядит в dom prntscr.com/aw9l84

[Юрий Шилка]

Артур Черешнюк: https://jsfiddle.net/pa7b88y1/

[Юрий Шилка]

Артур Черешнюк: имхо лучше внимательно читать первоисточник, чем смотреть какие-то уроки на ютубе, все есть на handlebarsjs.com

[freeman0204]

Юрий Шилка: Спасибо) а можно как то понять через dom это с шаблона или просто html?

[freeman0204]

Если мне нужно создать еще один такой блок только с другим контентом мне нужно дать другой id блоку так дальше?
var data = {
"objects":
Вместо objects дать другой id objects2 например?

[freeman0204]

Юрий Шилка: Если убрать класс hand то не работает.

[Юрий Шилка]

Артур Черешнюк: 1) думаю что если смотреть в chrome во вкладке "элементы" то не поймешь, но можно попробовать посмотреть в первоначальный исходник через ctrl+u, найти темплейты через поиск и по айдишнику найти куда они подставляются. Прямо глядя на узлы _наверно_ нет, я могу ошибаться
2) для блоков различающихся только данными новые айдишники не нужны, нужно пересоздать шаблон для каждого нового набора данных, т.е. делать template(data) для каждого нового data

[freeman0204]

Юрий Шилка: Можно в том примере что вы дали дописать еще один шаблон. У меня не выходит, добавляю и первый пропадает. Заранее спасибо.

[Юрий Шилка]

Артур Черешнюк: https://jsfiddle.net/pa7b88y1/

Answer 1

[Даниил Сорокин]

Может потому что, надо писать $('.hand').append( json ):

Comments

[freeman0204]

Не помогло

Answer 2

[Pretor DH]

Попробуй выложить темплейт из результирующего блока.

<script id="objects" type="text/x-handlebars-template">
{{#each objects}}
<h3>{{title}}</h3>
 <p>{{description}}
<a href="{{link}}">Ссылка</a>
</p>
{{/each}}
 </script>

<div class="hand">

</div>

А в варианте с AJAX

$(document).ready(function () {
    
    var hand = $('.hand');
    
$.ajax({
    url: 'data.json' 
}).done(function(data){
    var json = JSON.parse(data),
        source = $("#objects").html(),
        template = Handlebars.compile(source),
        html = template(json);
    
    $('.hand').append( html );             //-- было template(data)
})
});