"attr" バインディング

用途

attr バインディングは関連付けられた DOM エレメントに属性を設定する汎用的な機能です。 例えば、エレメントの title 属性や、img タグの src 属性、リンクの href 属性を ViewModel の値に基づいて設定することで、 対応するプロパティが変更される度に自動的に更新させることができます。

例

<a data-bind="attr: { href: url, title: details }">
	レポート
</a>
 
<script type="text/javascript">
	var viewModel = {
		url: ko.observable("year-end.html"),
		details: ko.observable("最後の年末統計情報レポート")
	};
</script>

上記の例では、エレメントの href 属性に year-end.html を、 title 属性に 最後の年末統計情報レポート が設定されます。

パラメタ

• 主パラメタ

  属性名と同じ名前のプロパティをもつ JavaScript オブジェクトを渡します。 それぞれのプロパティには、対応する属性に適用したい値を指定します。

  パラメタが参照している値が Observable である場合、バインディングは値が変更される度に属性の値を更新します。 Observable でない場合、属性は一度だけ適用され、以降は更新されません。

• 追加パラメタ

  なし

(注) JavaScript 変数名として無効な名前の属性を適用するには

data-something のような属性を適用する場合、次のように書くことはできません。

<div data-bind="attr: { data-something: someValue }">...</div>

なぜなら、data-something はこの場合において正当ではない名前だからです。 これは、名前を文字列リテラルにするためクォートで囲むだけで解決します。 この書き方は JavaScript オブジェクトリテラルの正当な構文です。 (技術的には、JSON の仕様において常にクォートで囲むべきとされていますが、実際のところはどちらでも構いません)

<div data-bind="attr: { 'data-something': someValue }">...</div>

依存

Knockout コアライブラリ以外、なし。