Änderungsereignis bei Auswahl mit Knockout-Bindung. Wie kann ich wissen, ob es sich um eine echte Änderung handelt?

Ich erstelle eine Benutzeroberfläche für Berechtigungen. Ich habe eine Liste mit Berechtigungen mit einer Auswahlliste neben jeder Berechtigung. Die Berechtigungen werden durch ein beobachtbares Array von Objekten dargestellt, die an eine Auswahlliste gebunden sind:

<div data-bind="foreach: permissions">
     <div class="permission_row">
          <span data-bind="text: name"></span>
          <select data-bind="value: level, event:{ change: $parent.permissionChanged}">
                   <option value="0"></option>
                   <option value="1">R</option>
                   <option value="2">RW</option>
           </select>
      </div>
 </div>

Das Problem ist nun folgendes: Das Änderungsereignis wird ausgelöst, wenn die Benutzeroberfläche zum ersten Mal gefüllt wird. Ich rufe meine Ajax-Funktion auf, erhalte die Berechtigungsliste und dann wird das Ereignis für jedes der Berechtigungselemente ausgelöst. Das ist wirklich nicht das Verhalten, das ich will. Ich möchte, dass es nur ausgelöst wird, wenn ein Benutzer wirklich einen neuen Wert für die Berechtigung in der Auswahlliste auswählt . Wie kann ich das tun?

Eigentlich möchten Sie herausfinden, ob das Ereignis vom Benutzer oder vom Programm ausgelöst wird , und es ist offensichtlich, dass dieses Ereignis während der Initialisierung ausgelöst wird.

Der Knockout-Ansatz des Hinzufügens subscriptionhilft nicht in allen Fällen, warum, weil in den meisten Fällen das Modell so implementiert wird

1. Initiieren Sie das Modell mit undefinierten Daten, nur Struktur (actual KO initilization)
2. Aktualisieren Sie das Modell mit den Anfangsdaten (logical init like load JSON , get data etc)
3. Benutzerinteraktion und Updates

Der eigentliche Schritt, den wir erfassen möchten, sind Änderungen in 3, aber im zweiten Schritt subscriptionwird ein Aufruf angezeigt. Ein besserer Weg ist es also, Ereignisänderungen wie hinzuzufügen

 <select data-bind="value: level, event:{ change: $parent.permissionChanged}">

und erkannte das Ereignis in permissionChangedFunktion

this.permissionChanged = function (obj, event) {

  if (event.originalEvent) { //user changed

  } else { // program changed

  }

}

Dies ist nur eine Vermutung, aber ich denke, es passiert, weil leveles eine Zahl ist. In diesem Fall valuelöst die Bindung ein changeEreignis aus, das levelmit dem Zeichenfolgenwert aktualisiert werden soll. Sie können dies daher beheben, indem Sie sicherstellen, dasslevel es sich um eine Zeichenfolge handelt.

Darüber hinaus besteht die "Knockout" -Methode darin, keine Ereignishandler zu verwenden, sondern Observables und Abonnements zu verwenden. Machen Sie levelein Observable und fügen Sie ihm ein Abonnement hinzu, das bei jeder levelÄnderung ausgeführt wird.

Hier ist eine Lösung, die bei diesem seltsamen Verhalten helfen kann. Ich konnte keine bessere Lösung finden, als eine Schaltfläche zum manuellen Auslösen des Änderungsereignisses zu platzieren.

EDIT: Vielleicht könnte eine benutzerdefinierte Bindung wie diese helfen:

ko.bindingHandlers.changeSelectValue = {

   init: function(element,valueAccessor){

        $(element).change(function(){

            var value = $(element).val();

            if($(element).is(":focus")){

                  //Do whatever you want with the new value
            }

        });

    }
  };

Und fügen Sie in Ihrem ausgewählten Datenbindungsattribut Folgendes hinzu:

changeSelectValue: yourSelectValue

Ich benutze diese benutzerdefinierte Bindung (basierend auf dieser Geige von RP Niemeyer, siehe seine Antwort auf darauf Frage), die sicherstellt, dass der numerische Wert ordnungsgemäß von Zeichenfolge in Zahl konvertiert wird (wie von der Lösung von Michael Best vorgeschlagen):

Javascript:

ko.bindingHandlers.valueAsNumber = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var observable = valueAccessor(),
            interceptor = ko.computed({
                read: function () {
                    var val = ko.utils.unwrapObservable(observable);
                    return (observable() ? observable().toString() : observable());
                },
                write: function (newValue) {
                    observable(newValue ? parseInt(newValue, 10) : newValue);
                },
                owner: this
            });
        ko.applyBindingsToNode(element, { value: interceptor });
    }
};

Beispiel HTML:

<select data-bind="valueAsNumber: level, event:{ change: $parent.permissionChanged }">
    <option value="0"></option>
    <option value="1">R</option>
    <option value="2">RW</option>
</select>

Wenn Sie einen beobachtbaren Wert anstelle eines primitiven Werts verwenden, löst die Auswahl beim ersten Binden keine Änderungsereignisse aus. Sie können weiterhin an das Änderungsereignis binden, anstatt das Observable direkt zu abonnieren.

Schnell und schmutzig mit einer einfachen Flagge:

var bindingsApplied = false;

var ViewModel = function() {
    // ...

    this.permissionChanged = function() {
        // ignore, if flag not set
        if (!flag) return;

        // ...
    };
};

ko.applyBindings(new ViewModel());
bindingsApplied = true; // done with the initial population, set flag to true

Wenn dies nicht funktioniert, versuchen Sie, die letzte Zeile in ein setTimeout () zu verpacken. Ereignisse sind asynchron. Möglicherweise steht das letzte noch aus, wenn applyBindings () bereits zurückgegeben wurde.

Ich hatte ein ähnliches Problem und habe gerade den Ereignishandler geändert, um den Typ der Variablen zu überprüfen. Der Typ wird erst festgelegt, nachdem der Benutzer einen Wert ausgewählt hat, nicht beim ersten Laden der Seite.

self.permissionChanged = function (l) {
    if (typeof l != 'undefined') {
        ...
    }
}

Das scheint bei mir zu funktionieren.

benutze das:

this.permissionChanged = function (obj, event) {

    if (event.type != "load") {

    } 
}

Probier diese:

self.GetHierarchyNodeList = function (data, index, event)
{
    debugger;
    if (event.type != "change") {
        return;
    }        
} 

event.type == "change"
event.type == "load" 

Wenn Sie mit Knockout arbeiten, verwenden Sie die Schlüsselfunktionalität von Knockout für beobachtbare Funktionen.
Verwenden Sie die ko.computed()Methode und führen Sie innerhalb dieser Funktion einen Ajax-Aufruf aus.