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

    Хочу поделиться с сообществом своей небольшой библиотекой, добавляющей управляющие директивы в синтаксис 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» — 'SleepingOwl\BladeExtended\BladeExtendedServiceProvider'.
    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 | Документация и примеры
    Поделиться публикацией

    Похожие публикации

    Комментарии 3

      +2
      А какая цель достигается этим расширением?

      Единственный плюс — совместимость синтаксиса с HTML, что полезно для малораспространенных шаблонов, но для blade уже не нужно: поддержка в IDE уже есть.
      Минус — понижение читаемости шаблона, когда надо не просто искать управляющие контрукции, а читать все подряд.
        +1
        Основная цель была директивы класса и атрибутов, так как стандартными средствами реализовать тэг, у которого может быть несколько классов, а может и не быть совсем — непростая задача.
        0
        я делал подобное для кнокаута, может кому-то понадобится, так что просто оставлю тут: pastebin.com/V6uXzFjU

        Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

        Самое читаемое