Knockout.js 日本語ドキュメント

"checked" バインディング

用途

checked バインディングは ViewModel のプロパティと チェックボックス (<input type="checkbox">) や ラジオボタン (<input type="radio">) などのチェックできるフォーム部品をリンクします。

ユーザが関連付けられたフォーム部品にチェックを入れると、ViewModel の値が更新されます。 反対に、ViewModel の値を変更することでフォーム部品のチェック状態を変更することができます。

(注) テキストボックスやドロップダウンリストなど、チェックできないフォーム部品は、 value バインディングを使ってバインドしてください。

チェックボックスの例

<p>ニュースメールを購読する: <input type="checkbox" data-bind="checked: wantsNews" /></p>
	
<script type="text/javascript">
	var viewModel = {
		wantsNews: ko.observable(true) // 最初はチェックされた状態
	};
	
	// ... その後 ...
	viewModel.wantsNews(false); // これでチェックが外される
</script>

チェックボックスを配列にバインドする例

<!-- View -->
<p>ニュースメールを購読する: <input type="checkbox" data-bind="checked: wantsNews" /></p>
<div data-bind="visible: wantsNews">
	ニュースカテゴリ:
	<div><input type="checkbox" value="IT" data-bind="checked: newsCategories" /> IT</div>
	<div><input type="checkbox" value="Sports" data-bind="checked: newsCategories" /> スポーツ</div>
	<div><input type="checkbox" value="Economy" data-bind="checked: newsCategories" /> 経済</div>
</div>
// ViewModel
var viewModel = {
	wantsNews: ko.observable(true),
	newsCategories: ko.observableArray(["IT","Sports"])
	// 最初は IT とスポーツにチェックが入った状態
};

// ... その後 ...
viewModel.newsCategories.push("Economy"); // これで経済にチェックが入る

ラジオボタンの例

<!-- View -->
<p>ニュースメールを購読する: <input type="checkbox" data-bind="checked: wantsNews" /></p>
<div data-bind="visible: wantsNews">
	ニュースカテゴリを選択して下さい:
	<div><input type="radio" name="newsCategoryGroup" value="IT" data-bind="checked: newsCategory" /> IT</div>
	<div><input type="radio" name="newsCategoryGroup" value="Sports" data-bind="checked: newsCategory" /> スポーツ</div>
	<div><input type="radio" name="newsCategoryGroup" value="Economy" data-bind="checked: newsCategory" /> 経済</div>
</div>
// ViewModel
var viewModel = {
	wantsNews: ko.observable(true),
	newsCategory: ko.observable("IT") // 最初は IT が選択された状態
};

// ... その後 ...
viewModel.newsCategory("Sports"); // これでスポーツが選択される

パラメタ

  • 主パラメタ Knockout はエレメントのチェック状態を、このパラメタの値に対応させます。 以前のチェック状態は上書きされます。 パラメタの値のバインド方法は、対象のエレメントのタイプにより決定されます。

    • チェックボックスの場合、値が true であればチェックボックスを　チェック済み　に、 false であれば　未チェック　にします。 boolean でない値を指定した場合は、相当する値として解釈されます。 つまり、0 以外の数値, null 以外のオブジェクト, 空ではない文字列は true として解釈され、 0, null, undefined, および空文字列は false として解釈されます。

      ユーザがチェックボックスにチェックを入れるか、外したとき、Knockout は ViewModel のプロパティに true または false を設定します。

      考慮すべき点は、パラメタが配列として解決される場合です。 この場合、Knockout はチェックボックスの value にマッチするアイテムが配列に含まれる場合に、 そのチェックボックスをチェック済みにし、逆にマッチするアイテムが含まれないチェックボックスのチェックを外します。

      ユーザがチェックボックスにチェックを入れるか、外したとき、Knockout は配列に対し、 アイテムを追加・削除します。

    • ラジオボタンの場合、Knockout はラジオボタンの value が値と同じである場合にのみ、そのラジオボタンにチェックを入れます。 したがって、値は文字列である必要があります。 前述の例では、value="IT" のラジオボタンは ViewModel のプロパティ「newsCategory」が "IT" のときのみチェック済みになります。

      ユーザがラジオボタンの選択状態を変更したとき、Knockout は ViewModel のプロパティに 選択されたラジオボタンの value 属性の値を設定します。 前述の例では、value="Sports" のラジオボタンを選択すると viewModel.newsCategory に "Sports" が設定されます。

      もちろん、これは複数のラジオボタンを一つのプロパティにバインドする場合に最も便利です。 確実に択一選択されるようにするため、name 属性に同じ値を設定するべきです。 (前述の例では newsCategoryGroup)
      これによりラジオボタンがグループ化され、一度に一つのみ選択できるようになります。

    パラメタが Observable である場合、バインディングは値が変更される度にエレメントのチェック状態を更新します。 Observable でない場合、エレメントのチェック状態は一度だけ設定され、以降は更新されません。

  • 追加パラメタ

    なし

依存

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

原文はこちら

side menu