knockout.js
Bindningar - Formfält

Klick

click kan användas med alla synliga DOM-element för att lägga till en händelsehanterare, som kommer att åberopa en JavaScript-funktion när elementet klickas.

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

alternativ

Använd den här bindningen för att skapa alternativ för ett valt objekt

<select data-bind="options: gasGiants"></select>
 
<script type="text/javascript">
    var viewModel = {
        gasGiants: ko.observableArray(['Jupiter', 'Saturn', 'Neptune', 'Uranus'])
    };
</script>

Du kan också använda egenskaper i matrisen för att visa i listan och för att spara i viewModel: optionsText möjliggör en anpassad visningstext

optionsValue anger optionsValue för motsvarande <option>

value lagrar värdet på det valda alternativet i en observerbar av 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>

För att lagra resultaten från en flervalslista kan alternativbindningen kombineras med den selectedOptions alternativbindningen.

<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>

inaktiverad aktiverad

Den inaktiverade bindningen lägger till ett disabled attribut till ett html-element som orsakar att det inte längre kan redigeras eller klickas. Detta är främst användbart för <input> , <select> , <textarea> , <a> och <button> element

<input data-bind="disabled: disableInput"/> 

<script type="text/javascript">
var viewModel = {
    disableInput: ko.observable(true);
};
</script>

Inverteringen av den disabled bindningen är enabled

Synligheten kan också beräknas med hjälp av JavaScript-funktioner. Eventuella observerbara objekt som används i denna funktion måste ringas med parenteser

<script type="text/javascript">
var viewModel = {
    disableInput: ko.observable(true);
};
</script>

eller

<input data-bind="disabled: allValues().length>4"/> 

<script type="text/javascript">
var viewModel = {
    allValues: ko.observableArray([1,2,3,4,5]);
};
</script>

Skicka in

Händelsehanterare som ska åberopas när ett DOM-element skickas in.

<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>

Knockout kommer att förhindra webbläsarens standard skicka åtgärder för det formuläret. Om du vill att formuläret ska lämnas in som en vanlig HTML-formulär, du kommer tillbaka bara true i skicka föraren.

Värde

Använd värdet bindande för att få värdet på ett element. Värdebindningen kan tillämpas på valfri formkontroll, men det finns andra bindningar som kan vara bättre lämpade för kryssrutor, radioknappar och textingångar.

Följande exempel illustrerar hur man applicerar bindande element på flera formulärinmatningsfält och hur man fyller i standardvärden:

ViewModel-definition:

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

Tillhörande markering:

<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>

I exemplet ovan, när ett värde ändras, kommer det nya värdet att loggas till konsolen. De initiala värdena utlöser inte en ändringshändelse.

Som standard definierar värdebindningen en förändring som en ändring av elementets värde och fokus överförs till ett annat element. Detta kan ändras med alternativet valueUpdate:

<input type="text" data-bind="value: valueOne, valueUpdate: 'keyup'" />

Exemplet ovan kommer att ändra värdeuppdateringen för att utlösa vid tangent upp. Tillgängliga alternativ är input, keyup, keypress och afterkeydown.