Изучаем возможности Handlebars JS!
В моем предыдущем посте я объяснил, что такое Handlebars JS и как мы можем использовать его с Ruby on Rails. В этой статье мы рассмотрим некоторые из полезных хелперов, предоставляемых Handlebars из коробки, как мы можем добавлять пользовательские хелперы, а также как мы можем создавать повторно используемые партиалы.
Условное выполнение с использованием блока if
Если нам нужен условный рендеринг блока, мы можем использовать ifпомощник блока. Этот блок не будет выполнен, если условие оценивается как false, undefined, null, "", 0 или []. Блок будет выполняться только в том случае, если условие не является ложным.
Давайте посмотрим на код ниже.
В приведенном выше коде у нас есть блок if, начинающийся со строки № 2 до строки № 12, весь этот блок не будет выполнен, если мы не передаем цену какой-либо книги.
Если мы передаем выше данные JSON, например
HandlebarsTemplates[‘book_list’]({ books: data});
то книга с названием JQuery не будет напечатана, так как цена 0 (0 считается ложной). Итак, здесь он проверит if 0, который будет оцениваться как false. Так что книги с названием Javascript и Ruby будут только напечатаны.
Точно так же вы также можете использовать unless, что является полной противоположностью if.
Создание пользовательских помощников
Handlebars также позволяют создавать собственные специальные вспомогательные методы. Это позволяет нам повторно использовать логику кода и помогает нам достичь принципа Не повторяйся (DRY). Вы можете использовать Handlebars API для регистрации любого хелпера методом registerHelper.
Приведенный выше код регистрирует помощника с именем formatName и ожидает для него параметр. Он вернет строку после добавления Mr. перед параметром, который будет передан во время выполнения.
<td>{{formatName author}}</td>
Поэтому, когда приведенная выше строка будет выполнена, будет напечатан следующий код.
<td>Mr. Author-1</td>
Самое приятное в этом — возможность повторного использования кода.
Помощник наверняка поможет вам решить многие проблемы ;)
Создание повторно используемых частей
Частичный — это html-код, который в целом повторяется и имеет схожую структуру. Если в нашей кодовой базе есть повторяющийся html-код, мы можем разбить его на небольшие частичные фрагменты. Мы всегда можем передать переменные партиалам, чтобы получить динамическое поведение. Они очень похожи на rails partials, а аргументы для partials такие же, как и у locals в rails partials.
Приведенный выше код регистрирует партиал с именем getButton .
{{> getButton className=”edit-book btn btn-warning” text=”Edit”}}
В строке выше мы использовали партиал с именем getButton и передали ему два параметра className и text . Еще одна вещь, на которую стоит обратить внимание, это то, что нам нужно использовать синтаксис {{> }} для вызова любого партиала. Когда вызывается getButton partial, он печатает следующий код.
<button class=”edit-book btn btn-warning” data-book-id=”2"> Edit </button>
Если вы заметили, мы передали className и text в качестве параметров, и они печатаются, но откуда взялось это таинственное id? Хоть и не много загадочного!!!
Когда вызывается какая-либо переменная, и если это не локальная или глобальная переменная, тогда Handlebars вызывает ее из контекста, в котором она была вызвана. Итак, он берет id из json, который мы передали и печатает 2.
В итоге наш первый кусок кода даст следующий результат.
Handlebars JS также предоставляет множество интересных функций, на которые стоит обратить внимание. Всю документацию можно найти здесь.
Спасибо за чтение. Если понравилось, нажмите на сердечко :)
