knockout.js
Wiązania - pola formularza

Kliknij

Powiązania click można używać z dowolnym widocznym elementem DOM w celu dodania modułu obsługi zdarzeń, który wywoła funkcję JavaScript po kliknięciu elementu.

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

Opcje

Użyj tego powiązania, aby zbudować opcje dla wybranego elementu

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

Możesz także użyć właściwości w tablicy do wyświetlania na liście i do zapisywania w viewModel: optionsText włącza niestandardowy wyświetlany tekst

optionsValue ustawia wartość właściwości odpowiedniego <option>

value przechowuje wartość wybranej opcji w obserwowalnym 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>

Aby zapisać wyniki listy wielokrotnego wyboru, powiązanie opcji można połączyć z powiązaniem 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>

wyłączony włączony

Wyłączone powiązanie dodaje disabled atrybut do elementu HTML, powodując, że nie można go już edytować ani klikać. Jest to przydatne głównie dla elementów <input> , <select> , <textarea> , <a> i <button>

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

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

Odwrotność disabled wiązania jest enabled

Widoczność można również obliczyć za pomocą funkcji JavaScript. Wszelkie obserwowalne używane w tej funkcji muszą być wywoływane w nawiasach

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

lub

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

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

Zatwierdź

Moduł obsługi zdarzeń, który ma zostać wywołany po przesłaniu elementu 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>

Knockout uniemożliwi domyślną akcję przesyłania przeglądarki dla tego formularza. Jeśli chcesz, aby formularz był przesyłany jak zwykły formularz HTML, po prostu zwróć true w module obsługi przesyłania.

Wartość

Użyj wiązania wartości, aby uzyskać wartość elementu. Wiązanie wartości można zastosować do dowolnej kontrolki formularza, jednak istnieją inne wiązania, które mogą być lepiej dostosowane do pól wyboru, przycisków opcji i wprowadzania tekstu.

Poniższy przykład ilustruje, jak zastosować element wiążący do kilku pól wejściowych formularza i jak wypełnić wartości domyślne:

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

Powiązane znaczniki:

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

W powyższym przykładzie, gdy wartość się zmienia, nowa wartość zostanie zarejestrowana w konsoli. Początkowe wartości nie wyzwalają zdarzenia zmiany.

Domyślnie powiązanie wartości definiuje zmianę jako zmianę wartości elementów, a fokus jest przenoszony na inny element. Można to zmienić za pomocą opcji valueUpdate:

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

Powyższy przykład zmieni aktualizację wartości tak, aby uruchamiała się przy kluczowaniu. Dostępne opcje to wejście, blokada klawiatury, naciśnięcie klawisza i afterkeydown.