バインディングは属性の内部にも配置することができます。
<p class="{{ if is_cool? }}cool{{ end }}">Text</p>
要素を「双方向バインディング」とするためのいくつかの機能があります。
<input type="text" value="{{ _name }}" />
上記で、もし _name が変更された場合、テキストボックスの値も更新されます。コントローラーで _name を実行すると、「name」の値を得ることができます。ユーザーがテキストボックスに入力したとき、コントローラーでは同等のセッターメソッドが呼び出されます。この場合は、コントローラー上で _name= が実行され、新しいフィールドの値が渡されます。これが双方向バインディングの効果です。ただ、データの更新のしかたは、異なるセッターメソッドを定義することで変更することができます。このことによって、単一方向/双方向バインディングともに利便性を高めることができると考えています。
上記の例で、_name が変更された場合にはフィールドも更新されます。逆に、フィールドが更新された場合には _name も変更されます。
<input type="checkbox" checked="{{ _checked }}" />
この例では、checked属性の値が true であるとき、チェックボックスはチェックされた状態になります。そして、「チェックされた or チェック解除された」という状態の変化に応じて、値が true または false に更新されます。
ラジオボタンも checked の状態に対してバインドすることができますが、true or false の代わりに、与えられたフィールドの値がセットされます。
<input type="radio" checked="{{ _radio }}" value="one" />
<input type="radio" checked="{{ _radio }}" value="two" />
ラジオボタンがチェックされたとき、checked には常にフィールドの値が設定されるようにバインドされます。checked にバインドされた値が変更されたとき、ラジオボタンのバインドされた値にマッチするすべてのフィールドがチェックされた状態になります。メモ: ラジオボタンに対しては、この振る舞いがもっとも利便性が高いと考えています。
セレクトボックスは値に対してバインドすることができます。(これは技術的には正しくありませんが、Volt では利便性のためにこのような振る舞いを追加しています)
<select value="{{ _rating }}">
<option value="1">*</option>
<option value="2">**</option>
<option value="3">***</option>
<option value="4">****</option>
<option value="5">*****</option>
</select>
選択されたオプションが変更されると、それに合うように _rating が変更されます。_rating が変更された場合には、それにマッチする最初のオプションが選択された状態になります。マッチするオプションが存在しなかった場合には、セレクトボックスは未選択の状態になります。
現在のところ、バインディングは属性の内部でのみ可能です。タグ内や、属性の外側でも利用できるようにすることを検討中です。