knockout.js
バインディング - フォームフィールド
サーチ…
クリック
click
バインディングは、表示されているDOM要素と一緒に使用してイベントハンドラを追加できます。このハンドラは、要素がクリックされたときにJavaScript関数を呼び出します。
<button data-bind="click: onClick">Click me</button>
ko.applyBindings({
onClick: function(data, event) {
// data: the context of the element that triggered the event
console.log(data);
// event: the click event
console.log(event);
}
});
オプション
このバインディングを使用して、選択した項目のオプションを構築する
<select data-bind="options: gasGiants"></select>
<script type="text/javascript">
var viewModel = {
gasGiants: ko.observableArray(['Jupiter', 'Saturn', 'Neptune', 'Uranus'])
};
</script>
また、配列内のプロパティを使用して、リストに表示したり、viewModelに保存しoptionsText
することもできますoptionsText
は、カスタム表示テキストを有効にします
optionsValue
は、対応する<option>
valueプロパティを設定します。
value
は、選択したオプションの値をviewModelのオブザーバブルに格納します。
<select data-bind="options: gasGiants, optionsText:'name', optionsValue:'id', value:selectedPlanetId"></select>
<script type="text/javascript">
var viewModel = {
selectedPlanetId: ko.observable(),
gasGiants: ko.observableArray([{name:'Jupiter', id:'0'},
{name:'Saturn', id:'1'},
{name:'Neptune', id:'2'},
{name:'Uranus', id:'3'}])
};
</script>
複数選択リストの結果を格納するには、optionsバインドをselectedOptions
バインディングと組み合わせることができます。
<select data-bind="options: gasGiants, selectedOptions: chosenGasGiants" multiple="true"></select>
<script type="text/javascript">
var viewModel = {
gasGiants: ko.observableArray(['Jupiter', 'Saturn', 'Neptune', 'Uranus'])
chosenGasGiants: ko.observableArray(['Jupiter','Saturn']) // Initial selection
}; </script>
無効/有効
無効にされたバインディングは、 disabled
属性をhtml要素に追加して、編集可能またはクリック可能にならなくなります。これは、主に<input>
、 <select>
、 <textarea>
、 <a>
、 <button>
要素に役立ち<button>
<input data-bind="disabled: disableInput"/>
<script type="text/javascript">
var viewModel = {
disableInput: ko.observable(true);
};
</script>
disabled
バインドの逆はenabled
可視性は、JavaScript関数を使用して計算することもできます。この関数で使用されるすべてのオブザーバブルは、かっこで呼び出す必要があります
<script type="text/javascript">
var viewModel = {
disableInput: ko.observable(true);
};
</script>
または
<input data-bind="disabled: allValues().length>4"/>
<script type="text/javascript">
var viewModel = {
allValues: ko.observableArray([1,2,3,4,5]);
};
</script>
提出する
DOM要素が送信されたときに呼び出されるイベントハンドラです。
<form data-bind="submit: doSomething">
<!-- form content here -->
<button type="submit"></button>
</form>
<script type="text/javascript">
var vm = {
doSomething: function(data){
//do something here
};
}
</script>
ノックアウトは、そのフォームのブラウザのデフォルトの送信アクションを妨げます。フォームを通常のHTMLフォームのように送信したい場合は、送信ハンドラでtrue
を返すだけです。
値
値バインディングを使用して要素の値を取得します。値バインディングは任意のフォームコントロールに適用できますが、チェックボックス、ラジオボタン、およびテキスト入力に適した他のバインディングがあります。
次の例は、複数のフォーム入力フィールドにバインディング要素を適用する方法と、デフォルト値を設定する方法を示しています。
ViewModelの定義:
var MyViewModel = function(){
var self = this;
//Initialize valueOne
self.valueOne = ko.observable();
//Initialize valueTwo with a default value of "Value two"
self.valueTwo = ko.observable("Value two");
//Initialize the color dropdown, and by default, select the "blue" option
self.color = ko.observable("blue");
self.valueOne.subscribe(function(newValue){
console.log("valueOne: " + newValue);
});
self.valueTwo.subscribe(function(newValue){
console.log("valueTwo: " + newValue);
});
self.color.subscribe(function(newValue){
console.log("color: " + newValue);
});
}
関連するマークアップ:
<input type="text" data-bind="value: valueOne" />
<input type="text" data-bind="value: valueTwo" />
<select data-bind="value: color">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
上記の例では、値が変更されると、新しい値がコンソールに記録されます。初期値は変更イベントをトリガーしません。
デフォルトでは、値バインディングは要素値の変更として変更を定義し、フォーカスは別の要素に転送されます。これは、valueUpdateオプションを使用して変更できます。
<input type="text" data-bind="value: valueOne, valueUpdate: 'keyup'" />
上記の例では、キーアップ時にトリガする値の更新を変更します。使用可能なオプションは、入力、キーアップ、キー押し、およびafterkeydownです。