メモとして残します。
■はじめに
@stackディレクティブが思いのほか面白い動作だったという話。
私はよくhead要素のJsやcssを読み込むところを@sectionディレクティブを使って
子テンプレートから親に出力した要素を印字していました。
しかし、@stackディレクティブも悪くなかったため、動作を確認してみました。
とりあえず@sectionディレクティブの場合をおさらい
子テンプレート
@extends('親テンプレート') {{-- 親テンプレート読む --}}
@section('scripts'){{-- 親テンプレートにscriptsというsectionに追記 --}}
@parent
<script>console.log('hoge')</script>
<script src="/js/app/hoge.js"></script>
@endsection
親テンプレート
<head>
@section('scripts')
<script>console.log('huge')</script>
<script src="/js/app/hugehuge.js"></script>
{{-- ★★★ここに子テンプレートで定義した要素が追記される★★★ --}}
@show
</head>
次に@stackディレクティブの場合
子テンプレート
@extends('親テンプレート') {{-- 親テンプレート読む --}}
@push('scripts')
<script>console.log('hoge')</script>
<script src="/js/app/hoge.js"></script>
@endpush
親テンプレート
<head>
<script>console.log('huge')</script>
<script src="/js/app/hugehuge.js"></script>
@stack('scripts'){{-- ★★★ここに子テンプレートで@pushした要素が追記される★★★ --}}
</head>
ここで注意しないといけないのはpushした順番に、stackディレクティブに印字されます。（スタックなのに。。。）
となると、場合によってはすでにstackされていたとしても一番前に詰め込みたい場合が出てくるかもです。
そういう場合は@prependディレクティブを使うことで一応、順番ぬかしはできるようです。
番外編@prependディレクティブ
子テンプレート
@extends('親テンプレート') {{-- 親テンプレート読む --}}
@push('scripts')
{{-- 2番目に印字 --}}
@endpush
@prepend('scripts')
{{-- 1番目に印字 --}}
@endprepend
@push('scripts')
{{-- 3番目に印字 --}}
@endpush
親テンプレート
<head>
<script>console.log('huge')</script>
<script src="/js/app/hugehuge.js"></script>
@stack('scripts'){{-- ★★★ここに子テンプレートで@pushした要素が追記される★★★ --}}
</head>
■さいごに
@stackディレクティブ、面白いが、@sectionでもいい気がする。。。
もっと効果的な使い方があるのかも。。。