Click-Ereignis mit bestätigen Aufforderung Anruf in Radioeingang mit Knockout.js

Question

Ich habe Probleme mit Arbeitsablauf, bemerkte ich, dass es Radio-Button zu überprüfen, bevor die bestätigen, prompt aufgerufen wurde und einige Entscheidung durch den Benutzer gemacht wurde. Ich möchte nicht, weil in realen Anwendung werde ich einige Bootstrap bestätigen modal anrufen und wenn Radio ausgewählt wird, macht Ajax-Request an den Server (gemäß dieser einige Entscheidungen treffen aktivieren Schaltfläche „Weiter“ oder nicht). Andere Wörter, die ich nicht will, dass Radio gewählt wird, bevor dieser Benutzer eine Entscheidung trifft.

ich debugger setzen, dass diese Punkte von Workflow klären, können Sie es in jsfiddle versuchen.

HTML

<p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam" /></p> 
<div data-bind="visible: wantsSpam"> 
    Preferred flavor of spam: 
    <div><input type="radio" name="flavorGroup" value="cherry" data-bind="checked: spamFlavor, click: clicked" /> Cherry</div> 
    <div><input type="radio" name="flavorGroup" value="almond" data-bind="checked: spamFlavor, click: clicked" /> Almond</div> 
    <div><input type="radio" name="flavorGroup" value="msg" data-bind="checked: spamFlavor, click: clicked" /> Monosodium Glutamate</div> 
</div> 

JavaScript

var viewModel = { 
     wantsSpam: ko.observable(true), 
     spamFlavor: ko.observable("almond"), 
     clicked : function(){ 
       debugger; // put as checked radio button whish was clicked 
       var conf = confirm("Do you want check it?"); 
       debugger; // only here is conf is true 
       return conf; // by this condition revert checked radio button back 
     } 
    }; 


viewModel.spamFlavor("msg"); 

ko.applyBindings(viewModel); 

, die besser bieten zu verstehen mein Problem:

https://jsfiddle.net/stanislavmachel/8ew7cdxz/11/

Es ist möglich, dieses Problem zu lösen? Wenn Sie Fragen zu meinem Problem haben, werde ich so schnell wie möglich antworten und klären. Vielen Dank.

Answer 1

könnten Sie Niemeyers verwenden protectedObservable wie hier beschrieben: http://www.knockmeout.net/2011/03/guard-your-model-accept-or-cancel-edits.html

Es beobachtbares in einem read/write wickelt berechnet, die Spur von zwei Werten hält: ein vorübergehendes Phänomen, und eine echte, eine verpflichtet.

Hier ist, wie es funktionieren könnte:

// http://www.knockmeout.net/2011/03/guard-your-model-accept-or-cancel-edits.html 
 
//wrapper to an observable that requires accept/cancel 
 
ko.protectedObservable = function(initialValue) { 
 
    //private variables 
 
    var _actualValue = ko.observable(initialValue), 
 
    _tempValue = initialValue; 
 

 
    //computed observable that we will return 
 
    var result = ko.computed({ 
 
    //always return the actual value 
 
    read: function() { 
 
     return _actualValue(); 
 
    }, 
 
    //stored in a temporary spot until commit 
 
    write: function(newValue) { 
 
     _tempValue = newValue; 
 
    } 
 
    }).extend({ 
 
    notify: "always" 
 
    }); 
 

 
    //if different, commit temp value 
 
    result.commit = function() { 
 
    if (_tempValue !== _actualValue()) { 
 
     _actualValue(_tempValue); 
 
    } 
 
    }; 
 

 
    //force subscribers to take original 
 
    result.reset = function() { 
 
    _actualValue.valueHasMutated(); 
 
    _tempValue = _actualValue(); //reset temp value 
 
    }; 
 

 
    return result; 
 
}; 
 

 
var viewModel = { 
 
    wantsSpam: ko.observable(true), 
 
    spamFlavor: ko.protectedObservable("almond"), 
 
    onChange: function() { 
 
    if (confirm("Are you sure?")) { 
 
     viewModel.spamFlavor.commit(); 
 
    } else { 
 
     viewModel.spamFlavor.reset(); 
 
    } 
 
    } 
 
}; 
 

 
viewModel.spamFlavor("msg"); 
 
viewModel.spamFlavor.commit(); 
 

 
ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<p>Send me spam: 
 
    <input type="checkbox" data-bind="checked: wantsSpam" /> 
 
</p> 
 
<div data-bind="visible: wantsSpam"> 
 
    Preferred flavor of spam: 
 
    <div> 
 
    <input type="radio" name="flavorGroup" value="cherry" data-bind="checked: spamFlavor, event: { change: onChange }" /> Cherry</div> 
 
    <div> 
 
    <input type="radio" name="flavorGroup" value="almond" data-bind="checked: spamFlavor, event: { change: onChange }" /> Almond</div> 
 
    <div> 
 
    <input type="radio" name="flavorGroup" value="msg" data-bind="checked: spamFlavor, event: { change: onChange }" /> Monosodium Glutamate</div> 
 
</div>

Beachten Sie, dass ich habe Ihr click Ereignis ein change Ereignis verändert. Dies ermöglicht die Tastatureingabe. Idealerweise würden Sie auf Änderungen der tempValue abonnieren, aber ich bin nicht sicher, wie das zu tun mit der verknüpften Anwendung ...