Занять 10 минут, чтобы начать работу с рулями

Автор оригинала: FreeCodeCamp Community Member.

крылом Puah

В наше время разработка интерфейса больше не о создании статической разметки HTML и составления файлов SASS. Повышение приложений по одной странице (SPA) означает, что мы можем сделать много логики рендеринга на стороне клиента. Современный день веб-разработка часто требует динамического ввода данных.

В то время как React.js Здорово, часто требуется кривая обучения для разработчиков, прежде чем они смогут интегрировать его в команду. Недавно я был поручено создать фронт-конец веб-сайта курса. Это ознаменовало начало моего разведки в Handlebars.js Отказ

Ручки – это популярный и простой шаблон, который прост в использовании. Это выглядит очень похоже на обычный HTML, с встроенными выражениями руль в фигурных скобках {{}}.

   {{name}}
   {{quote}}

Прежде чем мы перейдем к деталям руль, давайте посмотрим, как данные будут вставлены на страницу через Vanilla JavaScript. Мы возьмем пример построения веб-страницы, которая перечисляет несколько цитат. Потому что, эй, все нужны вдохновение.

Ванильный JavaScript

Извлечение данных

Большую часть времени вы можете получить данные через AJAX, но для простоты мы создадим наш собственный объект данных.

// quotes.js var quotes = [   {name: "Frank Lloyd Wright", quote: "You can use an eraser on the drafting table or a sledge hammer on the construction site."},  {name: "Douglas Adams", quote: "The major difference between a thing that might go wrong and a thing that cannot possibly go wrong is that when a thing that cannot possibly go wrong goes wrong it usually turns out to be impossible to get at or repair."},   {name: "Ettore Sottsass", quote: "I try and be as stupid as possible regarding my profession, which means I try to look at as few design magazines as possible."},   {name: "Shaun White", quote: "I'm a big fan of doing what you are really bad at. A lot."} ]

Создайте HTML Markup.

// index.html

Добавление данных с JavaScript

Мы будем использовать для петля для цикла через содержимое выше.

//quotes.jslet quoteMarkup = '';

for (var i = 0; i < quotes.length; i++) {  let name = quotes[i].name,       quote = quotes[i].quote;

quoteMarkup += '' +                  '' + name + '
' +                  '' + quote + '
'                 '
'}

document.getElementById('quotes').innerHTML = quoteMarkup;

С кодом, как это, трудно прочитать и утомительно писать. И HTML Markup для этой страницы теперь находится как в Index.html, так и quotes.js.

Введите руль

Начиная

Чтобы начать, нам нужно включить файл исходного кода руля. Вы можете добавить ссылку внутри головного тега или до конца .

В качестве альтернативы вы также можете ссылаться на ручки с CDN.

Создать шаблон

Мы все равно будем использовать объект данных цитаты из файла выше. Мы посыпьте магию руль в файле index.html.

//index.html

каждый : Итерации по данным
это : R опередики к текущему контексту.
Текст/X-руль – шаблон : Чтобы сказать браузеру не выполнять скрипт как обычный JavaScript.

Составьте шаблон с рулями

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

let content = document.getElementById('quotes'),    src = document.getElementById('quotes-template').innerHTML,     template = Handlebars.compile(src),            html = template(quotes);

content.innerHTML = html;

Содержание : Возвращает элемент, в который вы хотите вставить скомпилированную информацию.
SRC : Извлекает разметку шаблона.
Handlebars.comPile (SRC) : Компилирует шаблон в использовании. Это вернет функцию, которую данные могут быть переданы, чтобы ее можно было сделать.
Шаблон (цитаты) : Компилирует данные в шаблон.
content.innerhtml : Оказывает вышесказанное до DOM

Вы можете просмотреть Проект здесь Отказ

Бонус

Я использовал руль для веб-сайта нескольких шаблонов. Я обнаружил, что написал один и тот же код Ajax и руль несколько раз. Итак, вот две функции, которые я создал, чтобы облегчить мою жизнь.

Получение данных из AJAX с JavaScript

function ajaxGet(url, callback) {    let xmlhttp = new XMLHttpRequest();    xmlhttp.onreadystatechange = function() {        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {            // console.log(xmlhttp.responseText);            try {                var data = JSON.parse(xmlhttp.responseText);            } catch(err) {                console.log(err.message +' Getting: ' + url);                return;            }            callback(data);        }    };

xmlhttp.open("GET", url, true);    xmlhttp.send();}

Функция для запуска руль

function runHandlebars(id, dataSrc, src) {  if(document.getElementById(id) != null) {    let content = document.getElementById(id);    ajaxGet(dataSrc, function(data){      let source = document.getElementById(src).innerHTML,           template = Handlebars.compile(source);

content.innerHTML = template(data);    });  }}

С этими двумя функциями я мог бы запустить все моих рульковых кодов на одном файле JavaScript. Это будет выглядеть что-то подобное.

runHandlebars('nav-sub-1', '/data/courses.json', 'nav-submenu-template');

runHandlebars('contributors', '/data/contributors.json', 'contributors-template');

Вывод

Мой опыт работы с рулями был положительным. В моем проекте я использую его с глотанием и металсистыми. Буду ли я использовать его для других проектов? Мой взять Я предпочитаю что-то вроде реагирования или полноценного статического генератора сайта, такими как jekyll. Но в этом случае, когда команда удобнее с HTML Markup, и это относительно простой веб-сайт, руль – хороший выбор.

{{name}}