data-val

 タグ記法  コメント記法

プログラムからのデータを表示するデータ属性です。タグ記法では、該当タグに挟まれる内容はプログラムからの値で置換されます。コメント記法では、該当するコメントタグはプログラムからの値で置換されます。

Example

/resources/views/example.blocs.html
2行目 タグ記法で記述

<html>
<div data-val=$name></div>
</html>

/resources/views/example.blocs.html
2行目 コメント記法で記述

<html>
<div><!-- data-val=$name --></div>
</html>

/routes/web.php

Route::get('/blocs', function () {
    return view('example', [
        'name' => 'Linear',
        'url' => 'http://www.linear.com/'
    ]);
});

http://127.0.0.1:8000/blocs

<html>
<div>Linear</div>
</html>

メニュー項目の自動置換

BLOCSは、メニューのラベルを取得して、data-valでメニューのラベルに変換して表示します。テンプレートにメニュー項目がなくても、同一フォルダ内のテンプレートにメニュー項目があれば変換します。例えば、入力画面のメニューのラベルで確認画面の表示項目を変換することができます。変換せずに表示したい時は、data-convertでrawを指定してください。

/resources/views/example.blocs.html
3行目 変換して表示
4行目 変換せずに表示

<html>

<span data-val=$type>メニュー項目</span>
<span data-val=$type data-convert='raw'>メニュー項目(変換前)</span>

<form>
<select id="type" name="type">
<option value="company">法人のお客様</option>
<option value="private">個人のお客様</option>
<option value="other">その他</option>
</select>

<input type='submit' />
</form>

</html>

/routes/web.php

Route::get('/blocs', function () {
    return view('example', [
        'type' => 'private'
    ]);
});

http://127.0.0.1:8000/blocs

<html>

<span>個人のお客様</span>
<span>private</span>

<form>
<select id="type" name="type">
<option value="company">法人のお客様</option>
<option value="private" selected>個人のお客様</option>
<option value="other">その他</option>
</select>

<input type='submit' />
</form>

</html>

動的にメニュー項目を追加

\Blocs\Option::addでメニュー項目を動的に追加できます。

/routes/web.php
2行目 動的にメニュー項目を追加

Route::get('/blocs', function () {
    \Blocs\Option::add('type', ['foreign' => '外国のお客様']);

    return view('example', [
        'type' => 'foreign'
    ]);
});

http://127.0.0.1:8000/blocs

<html>

<span>外国のお客様</span>
<span>private</span>

<form>
<select id="type" name="type">
<option value="company">法人のお客様</option>
<option value="private">個人のお客様</option>
<option value="other">その他</option>
<option value="foreign" selected>外国のお客様</option>
</select>

<input type='submit' />
</form>

</html>