Как заполнить HTML контентом из JSON через mustache/handlebars?

Question

[MaxRumata]

Мне нужно чтобы HTML сайта использовал mustache или handlebars чтобы заполнить себя контентом из JSON файла.
В поисках уроков нашел интересный сервис для тестирования такой связки с handlebars: tryhandlebarsjs.com

Из каких файлов должна состоять связка и как именно можно связать Handlebars, JSON и HTML воедино, чтобы добиться такого эффекта?
Буду благодарен за разъяснение, так как в этом подходе для меня много нового.
Заранее большое спасибо.

Answer 1

[yogurt1]

Библиотека Handlebars получает на вход шаблон и возвращает функцию
Функция эта принимает на вход данные (JS-объект, который получить из JSON можно получить с помощью функции JSON.parse)
Результат работы функции - это HTML-код, который ты через innerHTML пихаешь куда хочешь
Шаблон можно встроить в HTML через тег script, указав нужный ID, который потом передавать будешь handlebars
Примерно так работает большинство шаблонизаторов
JSON можно получить через Fetch API
Пример:

fetch('/api/jsondata')
  .then(res => res.json())
  .then(data => el.innerHTML(Handlebars.compile(data)))
  .catch(err => throw err)

Comments

[MaxRumata]

Большое спасибо за подробное разъяснение! Все же есть много не до конца понятных мне моментов, Вы не посоветуете туториалы или статьи (можно и на английском), не по теории с нуля, а по этому процессу, который вы описали: от создания HTML шаблона с Handlebars до финального этапа, когда HTML заполняет себя контентом с помощью JS-объекта, полученного из JSON? Я продолжаю искать, но нахожу только длинные курсы по основам, а нужно освоить именно этот процесс и основные принципы работы с ним самое короткое время.
Заранее большое спасибо!

[yogurt1]

MaxRumata: Шаблон - это строка, которую можно хранить как в самом JS, так и в HTML-документе в теге скрипт. Например: или ссылка на codepen: codepen.io/yogurt1/pen/mEvqOp

[MaxRumata]

yogurt1: Спасибо, кажется понимаю. Я создал простой HTML template и наполнил его контентом из внешнего JS файла. codepen.io/MaxVelichkin/pen/qNgxpB
Теперь мне нужно чтобы контент лежал изначально в JSON файле. Правильно ли я понимаю дальнейшую логику:
1. Нужно чтобы JSON передал контент в HTML, но этот контент должен быть преобразован в Javascript. Для этого в JSON файле я прописываю тот же код что и в .Javascript файле в моем примере по ссылке выше, но перед последней строчкой (которая помещает контент в HTML через innerHTML) пишу: var contentJS = JSON.parse(quoteData); и в последней строчке заменяю последнее qoteData на contentJS.

2. Подключаю JSON к HTMLПока не нашел понятный мне способ как это сделать. Fetch API код, который Вы написали делает именно это? Насколько я понимаю Fetch чем-то похож на XMLHttpRequest (XHR) (который для меня - совсем новая тема)?..

[MaxRumata]

yogurt1: И в догонку к первому шагу: в чем преимущество этого подхода, почему стоит хранить данные в JSON файле и преобразовывать в Javascript, а не сразу использовать Javascript файл?