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="checked: myFlag" />
Off <input type="radio" name="mygroup" value="Off" data-bind="checked: myFlag" />

<hr />

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

<hr />

On <input type="radio" name="othergroup" value="On" data-bind="radioBoolean: aFlag" />
Off <input type="radio" name="othergroup" value="Off" data-bind="radioBoolean: aFlag" />

JavaScript

var MyViewModel = function () {
    this.aFlag = ko.observable(false);
    this.myFlag = ko.observable(false);
    this._myFlag = ko.computed({
        read: function () { 
            var x = this.myFlag();
            return x == "On";
        },
        write: function(value) {
            this.myFlag(value == "On");
        },
        owner: this
    });
};

ko.bindingHandlers.radioBoolean = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        var value = valueAccessor();
        var newValueAccessor = function() {
            return ko.computed({
                read: function() {
                    //alert(value());
                    return value() ? "On" : "Off";
                },
                write: function(val) {
                    value(val == "On");
                }
            });
        };
        ko.bindingHandlers.checked.init(element, newValueAccessor, allBindingsAccessor);
    },
    update: function(element, valueAccessor) {
        //var value = valueAccessor();
        //alert('?');
        //var newValueAccessor = function() {
        //    return value ? "On" : "Off";
        //}
        //ko.bindingHandlers.checked.update(element, newValueAccessor);
    }
};

var viewModel = new MyViewModel();

ko.applyBindings(viewModel);