knockout.js
Associazioni - Campi modulo

Clic

Il bind di click può essere utilizzato con qualsiasi elemento DOM visibile per aggiungere un gestore di eventi, che invocherà una funzione JavaScript, quando si fa clic sull'elemento.

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

Opzioni

Utilizza questa associazione per creare opzioni per un elemento selezionato

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

È inoltre possibile utilizzare le proprietà all'interno della matrice per la visualizzazione nell'elenco e per il salvataggio in viewModel: optionsText consente di visualizzare un testo personalizzato

optionsValue imposta la proprietà value della corrispondente <option>

value memorizza il valore dell'opzione selezionata in un osservabile di 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>

Per memorizzare i risultati di un elenco di selezione multipla, le opzioni di rilegatura possono essere combinati con le selectedOptions vincolante.

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

disabilitato abilitato

L'associazione disabilitata aggiunge un attributo disabled a un elemento html, impedendo che sia più modificabile o cliccabile. Questo è utile principalmente per gli elementi <input> , <select> , <textarea> , <a> e <button>

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

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

L'inverso dell'associazione disabled è enabled

La visibilità può anche essere calcolata utilizzando le funzioni JavaScript. Qualsiasi osservabile utilizzato in queste funzioni deve essere chiamato con parentesi

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

o

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

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

Sottoscrivi

Gestore di eventi da invocare quando viene inviato un elemento 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 impedirà l'azione di invio predefinita del browser per tale modulo. Se vuoi che il tuo modulo venga inviato come un normale modulo HTML, devi solo restituire true nel gestore di invio.

Valore

Usa il valore vincolante per ottenere il valore di un elemento. Il valore vincolante può essere applicato a qualsiasi controllo di modulo, tuttavia esistono altri collegamenti che potrebbero essere più adatti per caselle di controllo, pulsanti di opzione e input di testo.

Nell'esempio seguente viene illustrato come applicare l'elemento di associazione a diversi campi di input del modulo e come compilare i valori predefiniti:

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

Markup associato:

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

Nell'esempio precedente, quando un valore cambia, il nuovo valore verrà registrato nella console. I valori iniziali non innescano un evento di modifica.

Per impostazione predefinita, il valore vincolante definisce una modifica come una modifica al valore degli elementi e lo stato attivo viene trasferito a un altro elemento. Questo può essere modificato usando l'opzione valueUpdate:

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

L'esempio sopra cambierà l'aggiornamento del valore da attivare alla chiave su. Le opzioni disponibili sono input, keyup, keypress e afterkeydown.