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>

属性値が変数だけの時はdata-valが省略できます。data-convertなどとの併用も可能です。 

<html>
<div><!-- $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>