Mapping a pair of radio buttons to a boolean observable

https://groups.google.com/d/topic/knockoutjs/8dMS8ycK6hU/discussion

by RedF

HTML

<script src="https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
On <input type="radio" name="mygroup" value="On" data-bind="radioOnOffBoolean: myFlag" />
Off <input type="radio" name="mygroup" value="Off" data-bind="radioOnOffBoolean: myFlag" />

<hr />

<div data-bind="text: ko.toJSON(viewModel)"></div>

JavaScript

ko.bindingHandlers.radioOnOffBoolean = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        var value = valueAccessor();
        var newValueAccessor = function() {
            return ko.dependentObservable({
                read: value,
                write: function(newValue) {
                    value(newValue === "On");
                }
            }); 
        };
        
        ko.bindingHandlers.checked.init(element, newValueAccessor, allBindingsAccessor);
    },
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        var newValueAccessor = function() {
            return value ? "On" : "Off";   
        }
        ko.bindingHandlers.checked.update(element, newValueAccessor);
    }     
}

var viewModel = {
    myFlag: ko.observable(false)   
};

ko.applyBindings(viewModel);