Compétences de méthode de création de liaison personnalisée Knockout_javascript

Aperçu

En plus des types de liaison intégrés de KO répertoriés dans l'article précédent (tels que valeur, texte, etc.), vous pouvez également créer des liaisons personnalisées.

Enregistrez votre gestionnaire de liaison

ko.bindingHandlers.yourBindingName = {
  init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    // This will be called when the binding is first applied to an element
    // Set up any initial state, event handlers, etc. here
  },
  update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    // This will be called once when the binding is first applied to an element,
    // and again whenever any observables/computeds that are accessed change
    // Update the DOM element based on the supplied values here.
  }
}; 

Ensuite, vous pouvez utiliser une liaison personnalisée sur n'importe quel élément dom :

<div data-bind="yourBindingName: someValue"> </div> 

Remarque : vous n'êtes pas obligé de fournir à la fois les rappels init et update dans votre gestionnaire, vous pouvez fournir l'un ou l'autre.

mettre à jour le rappel

Comme son nom l'indique, lorsque votre attribut de surveillance observable est mis à jour, ko appellera automatiquement votre rappel de mise à jour.

Il a les paramètres suivants :

élément : utilisez cet élément dom lié

valueAccessor : la valeur de l'attribut de modèle actuellement lié peut être obtenue en appelant valueAccessor(). L'appel de ko.unwrap(valueAccessor()) peut obtenir plus facilement la valeur observable et la valeur ordinaire ;

allBindings : toutes les valeurs d'attribut liées au modèle sur cet élément dom, par exemple, appelez callBindings.get('name') pour renvoyer la valeur de l'attribut de nom lié (si elle n'existe pas, renvoyez undéfini), ou call allBindings.has(' name') détermine si le nom est lié au dom actuel

;

viewModel : obsolète dans Knockout.3x, vous pouvez utiliser bindContext.$data ou bindContext.$rawData pour obtenir le viewModel actuel

 ;

BindingContext : contexte de liaison, vous pouvez appeler BindingContext.$data, BindingContext.$parent, BindingContext.$parents, etc. pour obtenir des données

Regardez ensuite un exemple. Vous souhaiterez peut-être utiliser une liaison visible pour contrôler la visibilité des éléments et ajouter des effets d'animation. Dans ce cas, vous pouvez créer votre liaison personnalisée :

.

ko.bindingHandlers.slideVisible = {
  update: function(element, valueAccessor, allBindings) {
    // First get the latest data that we're bound to
    var value = valueAccessor();
    // Next, whether or not the supplied model property is observable, get its current value
    var valueUnwrapped = ko.unwrap(value);
    // Grab some more data from another binding property
    var duration = allBindings.get('slideDuration') || 400; // 400ms is default duration unless otherwise specified
    // Now manipulate the DOM element
    if (valueUnwrapped == true)
      $(element).slideDown(duration); // Make the element visible
    else
      $(element).slideUp(duration);  // Make the element invisible
  }
}; 

Vous pouvez ensuite utiliser cette liaison personnalisée comme ceci :

<div data-bind="slideVisible: giftWrap, slideDuration:600">You have selected the option</div>
<label><input type="checkbox" data-bind="checked: giftWrap" /> Gift wrap</label>
<script type="text/javascript">
  var viewModel = {
    giftWrap: ko.observable(true)
  };
  ko.applyBindings(viewModel);
</script> 

init rappel

ko appellera votre fonction init pour chaque élément dom qui utilise la liaison, il a deux objectifs principaux :

(1) Définir l'état d'initialisation de l'élément dom

(2) Enregistrez certains gestionnaires d'événements, par exemple : lorsque l'utilisateur clique ou modifie l'élément dom, vous pouvez modifier l'état de l'attribut de surveillance

;

ko utilisera exactement le même ensemble de paramètres que le rappel de mise à jour.

En continuant avec l'exemple précédent, vous souhaiterez peut-être que slideVisible définisse l'état de visibilité de l'élément (sans aucun effet d'animation) lorsque la page est affichée pour la première fois, et que l'effet d'animation soit exécuté lorsqu'il change ultérieurement. Vous pouvez suivre Voici comment. pour le faire :

ko.bindingHandlers.slideVisible = {
  init: function(element, valueAccessor) {
    var value = ko.unwrap(valueAccessor()); // Get the current value of the current property we're bound to
    $(element).toggle(value); // jQuery will hide/show the element depending on whether "value" or true or false
  },
  update: function(element, valueAccessor, allBindings) {
    // Leave as before
  }
}; 

giftWrap est initialisé et défini comme false (ko.observable(false)). Le DIV associé sera masqué lors de l'initialisation, puis le DIV ne sera affiché que lorsque l'utilisateur clique sur la case à cocher.

Vous savez maintenant comment utiliser les rappels de mise à jour pour mettre à jour les éléments DOM lorsque la valeur observable change. Nous pouvons désormais utiliser une autre méthode pour le faire. Par exemple, lorsque l'utilisateur effectue une action, cela peut également provoquer la mise à jour de votre valeur observable, par exemple :

ko.bindingHandlers.hasFocus = {
  init: function(element, valueAccessor) {
    $(element).focus(function() {
      var value = valueAccessor();
      value(true);
    });
    $(element).blur(function() {
      var value = valueAccessor();
      value(false);
    });
  },
  update: function(element, valueAccessor) {
    var value = valueAccessor();
    if (ko.unwrap(value))
      element.focus();
    else
      element.blur();
  }
}; 

Vous pouvez désormais lire et écrire vos valeurs observables via la liaison "focusedness" de l'élément.

<p>Name: <input data-bind="hasFocus: editingName" /></p>
<!-- Showing that we can both read and write the focus state -->
<div data-bind="visible: editingName">You're editing the name</div>
<button data-bind="enable: !editingName(), click:function() { editingName(true) }">Edit name</button>
<script type="text/javascript">
  var viewModel = {
    editingName: ko.observable()
  };
  ko.applyBindings(viewModel);
</script>

Le contenu ci-dessus est la méthode de création de liaison personnalisée Knockout partagée par l'éditeur. J'espère qu'il vous plaira.