knockout.js
Bindingen - formuliervelden

Klik

De click binding kan worden gebruikt met zichtbare DOM-element een event handler toevoegt, wordt een JavaScript functie op te roepen, als element wordt geklikt.

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

opties

Gebruik deze binding om opties voor een geselecteerd item te maken

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

U kunt ook eigenschappen in de array gebruiken voor weergave in de lijst en voor opslaan in het viewModel: optionsText maakt een aangepaste weergavetekst mogelijk

optionsValue stelt de eigenschap value van de bijbehorende <option>

value slaat de waarde van de geselecteerde optie op in een waarneembaar object van het 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>

Om de resultaten van een meerkeuzelijst op te slaan, kunnen de bindende opties worden gecombineerd met de selectedOptions bindende opties.

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

Uitgeschakeld Ingeschakeld

De uitgeschakelde binding voegt een disabled kenmerk toe aan een html-element waardoor het niet langer bewerkbaar of klikbaar is. Dit is vooral handig voor de elementen <input> , <select> , <textarea> , <a> en <button>

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

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

Het omgekeerde van de disabled binding is enabled

De zichtbaarheid kan ook worden berekend met behulp van JavaScript-functies. Alle observables die in deze functies worden gebruikt, moeten tussen haakjes worden aangeroepen

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

of

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

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

voorleggen

Event-handler die moet worden opgeroepen wanneer een DOM-element wordt ingediend.

<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 voorkomt dat de browser standaard verzendacties voor dat formulier instelt. Als u wilt dat uw formulier wordt ingediend als een normaal HTML-formulier, keert u gewoon true terug in de handler voor verzenden.

Waarde

Gebruik de waardebinding om de waarde van een element te verkrijgen. De waardebinding kan op elk formulierbesturingselement worden toegepast, maar er zijn andere bindingen die wellicht beter geschikt zijn voor selectievakjes, keuzerondjes en tekstinvoer.

Het volgende voorbeeld illustreert hoe het bindende element op verschillende formulierinvoervelden moet worden toegepast en hoe standaardwaarden kunnen worden ingevuld:

ViewModel definitie:

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

Bijbehorende markup:

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

Wanneer in het bovenstaande voorbeeld een waarde verandert, wordt de nieuwe waarde vastgelegd in de console. De beginwaarden activeren geen wijzigingsgebeurtenis.

Standaard definieert de waardebinding een wijziging als een wijziging in de elementenwaarde en wordt de focus overgebracht naar een ander element. Dit kan worden gewijzigd met de optie valueUpdate:

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

In het bovenstaande voorbeeld wordt de waarde-update gewijzigd om bij het activeren van de sleutel te activeren. Beschikbare opties zijn invoer, keyup, keypress en afterkeydown.