Knockout - Abbrechen eines Änderungsereignisses?

Question

Ich habe ein Kontrollkästchen an eine Observable in einem Ansichtsmodell gebunden. Ich habe die Anforderung, ein "Bist du sicher?" Bestätigungsaufforderung, wenn der Benutzer es von wahr zu falsch ändert. Ich habe eine schreckliche Zeit herauszufinden, der beste Ort, um die Änderung "stornierbar" zu machen. . .

1) jQuery-Handler für Click-Ereignis 2) Ansichtsmodell interne subscribe "beforeChange" 3) Ansichtsmodell interne abonnieren (normal)

Auf jeden Fall hatte ich wesentlich lieber die Chance haben, um die Änderung abzubrechen direkt als Reaktion auf die Änderung, möglicherweise zurück zu seinem vorherigen Wert, wenn es sein muss.

Bietet Knockouts Abonnement-Event Ihnen die Möglichkeit, eine Änderung zu stornieren? Jeder Einblick würde geschätzt werden. Vielen Dank!

Answer 1

Hier ist eine einfache Möglichkeit, mit jQuery stopImmediatePropagation ist:

http://jsfiddle.net/rniemeyer/cBvXM/

<input type="checkbox" data-bind="click: confirmCheck, checked: myvalue" /> 

js:

var viewModel = { 
    myvalue: ko.observable(false), 
    confirmCheck: function(data, event) { 
     if (!confirm("Are you sure?")) { 
      event.stopImmediatePropagation();    
      return false; 
     } 
     return true; 
    } 
}; 

Answer 2

Aufgrund der in @RP Niemeyer Antwort kommentiert Probleme, ich habe gerade umgesetzt dieser Extender:

ko.extenders.confirmable = function(target, options) { 
    var message = options.message; 
    var unless = options.unless || function() { return false; } 
    //create a writeable computed observable to intercept writes to our observable 
    var result = ko.computed({ 
     read: target, //always return the original observables value 
     write: function(newValue) { 
      var current = target(); 

      //ask for confirmation unless you don't have 
      if (unless() || confirm(message)) { 
       target(newValue); 
      } else { 
       target.notifySubscribers(current); 
      } 
     } 
    }).extend({ notify: 'always' }); 

    //return the new computed observable 
    return result; 
}; 

Anschließend können Sie das wie folgt auf Ihr Modell anwenden:

var viewModel = { 
    myvalue: ko.observable(false).extend({confirmable: "Are you sure?"}); 
} 

Und wenn es ein Fall ist, in dem keine Bestätigung fragen (in diesem dummen Beispiel werden wir eine Bestätigung im März überspringen), Sie können tun:

var viewModel = { 
    myvalue: ko.observable(false).extend({confirmable: { message: "Are you sure?", unless: function() { return new Date().getMonth() == 2 }} }); 
}