Knockout-Kenntnisse für die Erstellung benutzerdefinierter Bindungen in Javascript

Übersicht

Zusätzlich zu den im vorherigen Artikel aufgeführten integrierten Bindungstypen von KO (z. B. Wert, Text usw.) können Sie auch benutzerdefinierte Bindungen erstellen.

Registrieren Sie Ihren Bindungshandler

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

Als nächstes können Sie eine benutzerdefinierte Bindung für jedes Dom-Element verwenden:

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

Hinweis: Sie müssen in Ihrem Handler nicht sowohl Init- als auch Update-Rückrufe bereitstellen, Sie können einen von beiden bereitstellen.

Update-Rückruf

Wie der Name schon sagt, ruft ko automatisch Ihren Aktualisierungsrückruf auf, wenn Ihr beobachtbares Überwachungsattribut aktualisiert wird.

Es hat die folgenden Parameter:

-Element: Verwenden Sie dieses gebundene Dom-Element;

valueAccessor: Der aktuell gebundene Modellattributwert kann durch Aufrufen von valueAccessor() abgerufen werden, um den beobachtbaren Wert und den gewöhnlichen Wert zu erhalten

allBindings: Alle Attributwerte, die an das Modell dieses Dom-Elements gebunden sind. Rufen Sie beispielsweise callBindings.get('name') auf, um den gebundenen Namensattributwert zurückzugeben (wenn er nicht vorhanden ist, geben Sie undefiniert zurück), oder call allBindings.has('name') bestimmt, ob name an den aktuellen Dom

gebunden ist

viewModel: In Knockout.3x veraltet, Sie können bindingContext.$data oder bindingContext.$rawData verwenden, um das aktuelle viewModel abzurufen;

bindingContext: Bindungskontext, Sie können bindingContext.$data, bindingContext.$parent, bindingContext.$parents usw. aufrufen, um Daten zu erhalten;

Sehen Sie sich als Nächstes ein Beispiel an. Möglicherweise möchten Sie die Sichtbarkeit von Elementen steuern und Animationseffekte hinzufügen:

Sie können diese benutzerdefinierte Bindung dann wie folgt verwenden:

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

Init-Rückruf

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

ko ruft Ihre Init-Funktion für jedes Dom-Element auf, das Bindung verwendet. Dies hat zwei Hauptzwecke:

(1) Legen Sie den Initialisierungsstatus für das Dom-Element fest;

(2) Registrieren Sie einige Ereignishandler, zum Beispiel: Wenn der Benutzer auf das Dom-Element klickt oder es ändert, können Sie den Status des Überwachungsattributs ändern;

ko verwendet genau denselben Parametersatz wie der Update-Callback.

Wenn Sie mit dem vorherigen Beispiel fortfahren, möchten Sie möglicherweise, dass slideVisible den Sichtbarkeitsstatus des Elements (ohne Animationseffekt) festlegt, wenn die Seite zum ersten Mal angezeigt wird, und der Animationseffekt ausgeführt wird, wenn er sich später ändert. So können Sie vorgehen um es zu tun:

giftWrap wird initialisiert und als falsch definiert (ko.observable(false)). Der zugehörige DIV wird während der Initialisierung ausgeblendet und dann wird der DIV nur angezeigt, wenn der Benutzer auf das Kontrollkästchen klickt.

Sie wissen jetzt, wie Sie Update-Callbacks verwenden, um DOM-Elemente zu aktualisieren, wenn sich der beobachtbare Wert ändert. Wir können dazu jetzt eine andere Methode verwenden. Wenn der Benutzer beispielsweise eine Aktion ausführt, kann dies auch dazu führen, dass Ihr beobachtbarer Wert aktualisiert wird, zum Beispiel:

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

Jetzt können Sie Ihre beobachtbaren Werte über die „Focusedness“-Bindung des Elements lesen und schreiben.

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

Der obige Inhalt ist die vom Herausgeber geteilte Methode zum Erstellen einer benutzerdefinierten Knockout-Bindung. Ich hoffe, sie gefällt Ihnen.