Расширение синтаксиса Blade

в 21:28, , рубрики: blade, laravel, open source

Хочу поделиться с сообществом своей небольшой библиотекой, добавляющей управляющие директивы в синтаксис Laravel-шаблонизатора Blade.

Сразу небольшой пример как это выглядит:

<div bd-if="$entry->active" bd-class="$entry->active ? 'active'">
	<ul>
		<li bd-foreach="$entry->items as $item">{{{ $item }}}</li>
	</ul>
</div>


После знакомства с Angular.js привычные глазу шаблоны стали казаться нелогичными и неудобными. Хотелось управлять тэгами и аттрибутами, а не обращаться с HTML, как с обычной строкой. Благо Blade позволяет легко расширить функционал, чем я и воспользовался.

Установка

  1. Добавить пакет «sleeping-owl/blade-extended» в ваш composer.json.
  2. Добавить Service provider в ваш «app/config/app.php» — 'SleepingOwlBladeExtendedBladeExtendedServiceProvider'.
  3. Расширенный синтаксис теперь вам доступен.

Как это работает

Библиотека до банального проста — все, что она делает, это конвертирует аттрибуты в корректный Blade-синтаксис. Так например код:

<span bd-if="test()"></span>
<div bd-foreach="$items as $item"><div class="title">{{{ $item }}}</div></div>

будет приведен к виду:

@if(test())<span></span>@endif
@foreach($items as $item)<div><div class="title">{{{ $item }}}</div></div>@endforeach

Несколько сложнее дела обстоят с аттрибутами тэга — тут используется helper, который выводит аттрибут, только если он содержит значение.

Поддерживаемые директивы

bd-foreach, bd-inner-foreach
Повторяет тэг целиком (bd-foreach), либо все содержимое тэга (bd-inner-foreach) в соответствии с указанными значениями.

bd-if
Выводит или нет тэг в зависимости от условия.

bd-class
Добавляет один или несколько классов элементу, можно использовать условия. Если у тэга уже определен аттрибут class, то новые классы будут добавлены к нему.

<div class="post" bd-class="$entry->active ? 'active', $entry->isInFuture() ? 'in-future' : 'in-past'"></div>

bd-attr-<attribute name>
Работает аналогично bd-class, но не поддерживает множественные значения и добавление к существующему аттрибуту.

<div bd-attr-id="$entry->id" bd-attr-data-type="$entry->type"></div>

bd-yield, bd-include
Эти директивы добавляют в тело тэга соответствующие команды Blade.

<div bd-yield="'content'"></div>

bd-section
Обрамляет тэг в blade-секцию.

<div bd-section="'content'"></div>

Хотите еще расширить синтаксис?

Функционал моей библиотеки, расширяющей возможности Blade, так же может быть расширен. Вы можете зарегистрировать свои аттрибуты, которые будут обрабатываться:

BladeExtended::extend('bd-test', function (BladeExtended $bladeExtended, &$finded)
{
  $bladeExtended->wrapOuterContent($finded, '@if(myCustomTest())', '@endif');
});

Исходники на GitHub | Документация и примеры

Автор: sleeping-owl

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js