knockout.js
Liaisons - Champs de formulaire

Cliquez sur

La liaison par click peut être utilisée avec n'importe quel élément DOM visible pour ajouter un gestionnaire d'événement, qui invoquera une fonction JavaScript lorsque l'utilisateur clique sur un élément.

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

Les options

Utilisez cette liaison pour créer des options pour un élément de sélection

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

Vous pouvez également utiliser les propriétés à l' intérieur du tableau pour afficher dans la liste et pour enregistrer dans le viewmodel: optionsText permet un texte d'affichage personnalisé

optionsValue définit la propriété value de l' <option> correspondante <option>

value stocke la valeur de l'option sélectionnée dans une observable de la vueModel

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

Pour stocker les résultats d'une liste à sélection multiple, les options de liaison peuvent être combinées avec la liaison 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>

désactivé activé

La liaison désactivée ajoute un attribut disabled à un élément HTML, ce qui l'empêche d'être modifiable ou cliquable. Ceci est utile principalement pour les éléments <input> , <select> , <textarea> , <a> et <button>

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

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

L'inverse de la liaison disabled est enabled

La visibilité peut également être calculée à l'aide des fonctions JavaScript. Toutes les observables utilisées dans ces fonctions doivent être appelées avec des parenthèses

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

ou

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

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

soumettre

Gestionnaire d'événements à appeler lorsqu'un élément DOM est soumis.

<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 empêchera l'action de soumission par défaut du navigateur pour ce formulaire. Si vous souhaitez que votre formulaire soit soumis comme un formulaire HTML normal, vous retournez simplement true dans le gestionnaire de soumission.

Valeur

Utilisez la liaison de valeur pour obtenir la valeur d'un élément. La liaison de valeur peut être appliquée à n'importe quel contrôle de formulaire. Cependant, il existe d'autres liaisons mieux adaptées aux cases à cocher, aux boutons radio et aux entrées de texte.

L'exemple suivant illustre comment appliquer l'élément de liaison à plusieurs champs d'entrée de formulaire et comment renseigner les valeurs par défaut:

Définition de 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);
  });
}

Balisage associé:

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

Dans l'exemple ci-dessus, lorsqu'une valeur change, la nouvelle valeur sera consignée dans la console. Les valeurs initiales ne déclencheront pas d'événement de modification.

Par défaut, la liaison de valeur définit une modification en tant que modification de la valeur des éléments et le focus est transféré vers un autre élément. Cela peut être modifié à l'aide de l'option valueUpdate:

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

L'exemple ci-dessus changera la mise à jour de la valeur pour qu'elle se déclenche à la clé. Les options disponibles sont la saisie, la saisie au clavier, la pression sur le clavier et la réutilisation ultérieure.