"hasfocus" バインディング

用途

hasfocus バインディングは DOM エレメントのフォーカス状態を ViewModel プロパティーにリンクします。 これは双方向(2way)バインディングです。したがって、

• ViewModel のプロパティに true または false をセットした場合、 関連付けられたエレメントがフォーカスされるか、またはフォーカスが外れます。
• ユーザが関連付けられたエレメントをフォーカスするか、またはフォーカスを外した場合、 ViewModel のプロパティに true または false がセットされます。

このバインディングは編集可能なエレメントが動的に表示されるような凝ったフォームを作る際に便利です。 またユーザが入力を開始すべき場所をコントロールする場合や、キャレットの位置に応じて処理をすることにも使えます。

例1: 基本

テキストボックスが現在フォーカスされているかをメッセージとして表示するシンプルな例です。 さらにボタンを使って強制的にフォーカスすることができます。

<!-- View -->
<input data-bind="hasfocus: isSelected" />
<button data-bind="click: setIsSelected">フォーカスする</button>
<span data-bind="visible: isSelected">テキストボックスはフォーカスされています</span>

// ViewModel
var viewModel = {
	isSelected: ko.observable(false),
	setIsSelected: function() { this.isSelected(true) }
};
ko.applyBindings(viewModel);

例2: クリックして編集

hasfocus バインディングは双方向に作用するため (ViewModel プロパティの値 <==> エレメントのフォーカス状態) “編集モード”の切り替え方法に便利です。 この例では、ViewModel の editing プロパティの値に応じて <span> または <input> エレメントの何れかで名前を表示します。 <input> エレメントからフォーカスが外れると、editing に false がセットされ、“編集モード”が終了します。

<!-- View -->
<p>
	名前: 
	<b data-bind="visible: !editing(), text: name, click: edit">&nbsp;</b>
	<input data-bind="visible: editing, value: name, hasfocus: editing" />
</p>
<p><em>名前をクリックして編集, 他の部分をクリックして変更を適用.</em></p>

// ViewModel
function PersonViewModel(name) {
	// プロパティ
	this.name = ko.observable(name);
	this.editing = ko.observable(false);

	// アクション
	this.edit = function() { this.editing(true) }
}
ko.applyBindings(new PersonViewModel('Bert Bertington'));

パラメタ

• 主パラメタ

  true (または true として評価される値) を渡すことで対象のエレメントにフォーカスします。 それ以外の値を渡した場合、対象のエレメントからフォーカスを外します。

  ユーザによるエレメントのフォーカス状態変更に応じて、このパラメタに true もしくは false がセットされます。

  このパラメタが Observable である場合、このバインディングは値が変更される度にエレメントのフォーカス状態を更新します。

• 追加パラメタ

  なし

依存

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