Protected Observable Example

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<script src="https://rawgit.com/ben336/5537138/raw/ad9d77767a167cfa3417d4c9807b59cb86efa7d9/knockout-protected.js"></script>
<div>
    There should be 10 guests per table
</div>
<div>
    <span>Num Tables:</span>
    <span data-bind="text:tables">
    </span>
</div>

<div>
    <span>Total Price:</span>
    <span data-bind="text:price">
    </span>
</div>

<div>
    <span>Num Guests:</span>
    <input data-bind="value:guests"/>
        
</div>


<button id="ok">OK</button>
<button id="cancel">Cancel</button>

JavaScript

var VM = function(){
    var self = this;
    
    self.guests=ko.protectedObservable(100);
    
    self.tables=ko.computed( function() {
        return Math.ceil(self.guests()/10);
    });
    
    self.price=ko.computed( function() {
        return "$"+self.tables()*20+".00";
    });
    
    self.commit = function(){
        self.guests.commit();    
    }
    
    self.reset = function(){
        self.guests.reset();    
    }
    
    
      
};

var vm = new VM();

ko.applyBindings(vm);

$("#ok").click(vm.commit);
$("#cancel").click(vm.reset);