knockout.js
Bindungen - Formularfelder

Klicken

Die click kann mit jedem sichtbaren DOM-Element verwendet werden, um einen Ereignishandler hinzuzufügen, der eine JavaScript-Funktion aufruft, wenn auf das Element geklickt wird.

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

Optionen

Verwenden Sie diese Bindung, um Optionen für ein ausgewähltes Element zu erstellen

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

Sie können auch in der Liste für die Anzeige innerhalb der Array - Eigenschaften verwenden und im Ansichtsmodell zu speichern: optionsText ermöglicht einen Text benutzerdefinierte Anzeige

optionsValue legt die value optionsValue der entsprechenden <option>

value speichert den Wert der ausgewählten Option in einem Beobachtungsfenster des 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>

Um die Ergebnisse einer Mehrfachauswahlliste zu speichern, kann die Optionsbindung mit der selectedOptions kombiniert werden.

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

deaktiviert aktiviert

Die deaktivierte Bindung fügt einem html-Element ein disabled Attribut hinzu, sodass dieses nicht mehr bearbeitet oder anklickbar ist. Dies ist vor allem für die Elemente <input> , <select> , <textarea> , <a> und <button> nützlich

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

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

Die Umkehrung der disabled Bindung ist enabled

Die Sichtbarkeit kann auch mit JavaScript-Funktionen berechnet werden. Alle in dieser Funktion verwendeten Observables müssen mit Klammern aufgerufen werden

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

oder

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

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

einreichen

Ereignisprozedur, die aufgerufen werden soll, wenn ein DOM-Element übergeben wird.

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

Durch die Aussparung wird verhindert, dass der Browser die standardmäßige Übermittlungsaktion für dieses Formular durchführt. Wenn Sie möchten, dass Ihr Formular wie ein normales HTML-Formular gesendet wird, geben Sie im Übergabehandler lediglich true zurück.

Wert

Verwenden Sie die Wertebindung , um den Wert eines Elements zu erhalten. Die Wertebindung kann auf jedes Formularsteuerelement angewendet werden. Es gibt jedoch andere Bindungen, die möglicherweise besser für Kontrollkästchen, Optionsfelder und Texteingaben geeignet sind.

Das folgende Beispiel veranschaulicht, wie Sie das Bindungselement auf mehrere Formulareingabefelder anwenden und Standardwerte ausfüllen:

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

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

Wenn sich im obigen Beispiel ein Wert ändert, wird der neue Wert in der Konsole protokolliert. Die Anfangswerte lösen kein Änderungsereignis aus.

Standardmäßig definiert die Wertebindung eine Änderung als Änderung des Elementwerts und den Fokus, der auf ein anderes Element übertragen wird. Dies kann mit der Option valueUpdate geändert werden:

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

Im obigen Beispiel wird die Wertaktualisierung so geändert, dass sie beim Hochfahren ausgelöst wird. Verfügbare Optionen sind Eingabe, Tastendruck, Tastendruck und Nachlauf.