knockout.js
バインディング - フォームフィールド

AngularJS ASP.NET asp.net-mvc C# Language CSS HTML JavaScript jQuery twitter-bootstrap TypeScript

クリック

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);
  });
}