active" bd-class=...">
Clever Geek Handbook

ブレード構文拡張

Blara Laravelテンプレートエンジンの構文に制御ディレクティブを追加する小さなライブラリをコミュニティと共有したいと思います。



すぐにそれがどのように見えるかの小さな例： 



<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. composer.jsonに「sleeping-owl / blade-extended」パッケージを追加します。
  2. 「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


タグ属性では物事がやや複雑になります-ここでは、値が含まれている場合にのみ属性を表示するヘルパーが使用されます。



サポートされているディレクティブ



bd-foreach 、 bd-inner-foreach

指定された値に応じて、タグ全体（bd-foreach）、またはタグの内容全体（bd-inner-foreach）を繰り返します。



bd-if

条件に応じてタグを表示するかどうか。



BDクラス

1つ以上のクラスを要素に追加します;条件を使用できます。 タグにすでにクラス属性が定義されている場合、新しいクラスが追加されます。 



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


bd-attr- <属性名>

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

ブレードセクションでタグをフレーミングします。 



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




構文を拡張したいですか？



Bladeの機能を拡張するライブラリの機能も拡張できます。 処理する属性を登録できます。 



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




GitHubのソース | ドキュメントと例


More articles:


All Articles