blocs/blocs: 変数の代入（data-assign）と属性値の置換（data-attribute）

blocs/blocs: 変数の代入（data-assign）と属性値の置換（data-attribute）

テンプレート内で変数への値の代入とHTMLタグの属性値を動的に置換する方法を説明します。

変数に値を代入する（data-assign）

data-assign と data-val を使って変数に値を代入します。タグ記法とコメント記法の両方で利用できます。

サンプルコード

$name に 名無し が代入され、「名無しさん、こんにちは。」と表示されます。

<!-- data-assign=$name data-val="名無し" -->
<div><!-- data-val=$name -->さん、こんにちは。</div>

省略記法

<!-- $name="名無し" -->
<div><!-- $name -->さん、こんにちは。</div>

変数が未定義の時だけ代入したい場合

data-none を使うと、変数が未定義または空の場合にのみ値を代入できます。

<!-- $name="名無し" data-none -->
<div><!-- $name -->さん、こんにちは。</div>

$name にすでに値がある場合は代入されず、その値が使われます。

HTMLタグの属性値を置き換える（data-attribute）

data-attribute 属性を使って、HTMLタグの属性値を変数で置き換えます。指定した属性がタグに存在しない場合は新しく追加されます。タグ記法・コメント記法の両方で使用できます。

サンプルコード

a タグに href 属性が追加され、$url の値が代入されます。

<!-- data-attribute="href" data-val=$url -->
<a><!-- $name --></a>

省略記法

<a :href=$url><!-- $name --></a>

コメント記法の場合:

<!-- :href=$url -->
<a><!-- $name --></a>

値を持たない属性（ブール属性）を追加する方法

<!-- :readonly -->
<input type="text" value="今日はいい天気">

条件に応じてブール属性を追加する方法

$isReadonly が真の場合のみ readonly 属性が追加されます。

<!-- :readonly data-if=$isReadonly -->
<input type="text" value="今日はいい天気">