Knockout js - Wie man Dropdown-Wert zum vorherigen Wert ändert, wenn bestimmte Bedingung nicht übereinstimmt

Question

knockout js - In meiner HTML-Seite habe ich ein Dropdown und JQgrid, in dem Benutzer neue Zeilen hinzufügen kann. Wenn der Benutzer den Dropdown-Wert vor dem Speichern der Rasterdaten ändert, möchte ich den Benutzer warnen, wenn er Rasterdaten speichern oder fortfahren möchte. Wenn der Benutzer Daten speichern möchte, sollte der Dropdown-Wert ein alter Wert oder ein neuer Wert sein.

Ich habe das Problem, dass Dropdown-Wert auf neuen Wert geändert wird.

ich habe knockout js abonnieren Methode auf selectedItem des Dropdowns. In der subscribe-Methode ist die Logik zum Füllen des Rasters vorhanden.

Answer 1

Die Subscribe-Methode auf einer Observable sagt Ihnen, nach welcher Änderung der Wert geändert wurde, daher ist es leider schon zu spät, um abzubrechen. Ich denke, Sie könnten erreichen, was Sie wollen, indem Sie an das Change-Event binden, anstatt die Wertbindung zu verwenden, und das Observable manuell mit dem neuen Wert aktualisieren, wenn es Ihre Bedingungen erfüllt.

var viewModel = function() { 
 
    var self = this; 
 
    self.Options = [1, 2, 3, 4]; 
 
    self.selectedOption = ko.observable(); 
 
    self.selectedOption.subscribe(function(newValue) { 
 
    console.log(newValue); 
 
    }); 
 

 
    self.isOptionValid = function(value) { 
 
    return (value > 2); 
 
    } 
 

 
    self.onChange = function(viewModel, event) { 
 
    var target = event.target; 
 
    var newValue = $(target).val(); 
 
    if (self.isOptionValid(newValue)) { 
 
     self.selectedOption(newValue); 
 
    } else { 
 
     console.log('Invalid selection'); 
 
     $(target).val(self.selectedOption()); //reset to previous value 
 
    } 
 
    } 
 
} 
 

 
ko.applyBindings(new viewModel());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<div> 
 
    <span>Pick a number greater than 2</span><br/> 
 
    <Select data-bind="options: Options, optionsCaption: '', event: {change: onChange}"> 
 
    </Select> 
 
</div>

Dies hat den Nachteil, nur eine Einweg-Bindung Bedeutung ist, dass, wenn Ihr den beobachtbaren Wert ändert sich von einer anderen Quelle, dann wird der Drop-Down nicht mit dem neuen Wert aktualisiert werden. Wenn Sie eine bidirektionale Bindung beibehalten müssen, sollten Sie stattdessen einen benutzerdefinierten Bindungshandler versuchen, etwa: gated value binding