Ce contenu est essentiellement une traduction des documents originaux. L'intention est d'en apprendre davantage sur KnockoutJs pour Magento 2 et de créer du contenu en portugais sur KnockouJs.
Dans KnockoutJs, les liaisons sont le moyen de connecter la logique du ViewModel (les données et la logique métier) avec la View (HTML). Bref, c'est grâce aux bindings que l'interface utilisateur reflète automatiquement les modifications de vos données, sans avoir besoin de manipuler directement le DOM.
Les liaisons dans KnockoutJs fonctionnent via l'attribut data-bind sur les éléments HTML. Cet attribut est l'endroit où vous spécifiez la liaison que vous souhaitez utiliser et les valeurs associées.
Le clic binding ajoute un gestionnaire d'événements afin que la fonction JavaScript choisie soit invoquée lorsque l'on clique sur l'élément DOM associé. Ceci est le plus souvent utilisé sur les éléments marqués
Chaque fois que l'on clique sur l'élément, cela invoquera la méthode qui a été passée dans le ViewModel, ce qui à son tour change l'état du ViewModel, ce qui provoque l'activation de l'interface utilisateur. mis à jour.
<div>
You've clicked <span data-bind="text: numberOfClicks"></span> times
<button data-bind="click: incrementClickCounter">Click me</button>
</div>
<script type="text/javascript">
ko.applyBindings({
numberOfClicks : ko.observable(0),
incrementClickCounter : function() {
var previousCount = this.numberOfClicks();
this.numberOfClicks(previousCount + 1);
}
});
</script>
Par défaut, KnockoutJs empêchera l'événement click d'effectuer des actions standard. Cela signifie que lorsque vous utilisez un clic de liaison sur une balise , le navigateur appellera simplement la fonction et ne naviguera pas vers le href du lien. La liaison clic-clic est généralement utilisée lorsque vous utilisez le lien dans le cadre d'une interface utilisateur qui manipule le ViewModel, et non comme un lien hypertexte normal vers une autre page Web. S'il est nécessaire que l'action de clic standard continue, renvoyez simplement true dans la fonction.
L'événement binding vous permet d'ajouter un gestionnaire d'événement pour un événement spécifié afin que la fonction JavaScript que vous avez choisie soit invoquée lorsque cet événement est déclenché pour l'élément DOM associé. Cela peut être utilisé pour se lier à n'importe quel événement tel qu'une pression sur une touche, un survol de la souris ou une sortie de la souris.
<div>
You've clicked <span data-bind="text: numberOfClicks"></span> times
<button data-bind="click: incrementClickCounter">Click me</button>
</div>
<script type="text/javascript">
ko.applyBindings({
numberOfClicks : ko.observable(0),
incrementClickCounter : function() {
var previousCount = this.numberOfClicks();
this.numberOfClicks(previousCount + 1);
}
});
</script>
La binding submit *est une directive de liaison de soumission sur un formulaire qui empêchera l'action de soumission par défaut du navigateur pour ce formulaire, en d'autres termes, le navigateur appellera la fonction de gestionnaire, mais ce ne sera pas le cas. envoyer le formulaire au serveur. La liaison *submit est généralement utilisée lorsque le formulaire est utilisé comme interface avec le ViewModel, et non comme un formulaire HTML normal. Si le formulaire doit être soumis sous forme de formulaire HTML normal, renvoyez simplement true à partir de votre gestionnaire de soumission.
<div>
<div data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }">
Mouse over me
</div>
<div data-bind="visible: detailsEnabled">
Details
</div>
</div>
<script type="text/javascript">
ko.applyBindings({
detailsEnabled: ko.observable(false),
enableDetails: function() {
this.detailsEnabled(true);
},
disableDetails: function() {
this.detailsEnabled(false);
}
});
</script>
binding activate entraîne l'activation de l'élément DOM associé lorsque la valeur de son paramètre est vraie. binding disable fonctionne de la manière inverse, provoquant la désactivation de l'élément DOM associé lorsque sa valeur est vraie.
<form data-bind="submit: doSomething">
<button type="submit">Submit</button>
</form>
<script type="text/javascript">
ko.applyBindings({
this.doSomething = function(formElement) {
// ... now do something
}
});
</script>
La binding valeur * lie la valeur de l'élément DOM associé à une propriété dans le *ViewModel. Ceci est généralement utile avec des éléments de formulaire tels que ,