Knockout RadioButton With Objects

by origineil

HTML

<span data-bind="foreach: complimentaryCustomerList">
    <label><span data-bind="text: ($data.Surname + ', ' + $data.GivenName)"></span>
        <input type="radio" name="companion" data-bind="value: function(){return ko.toJSON($data)}(), checked: $parent.complimentaryJSONHolder "/> 
    </label>
    
     
</span>

JavaScript

/*
 For other implementations/options see:

http://stackoverflow.com/questions/10044189/can-a-knockout-observable-be-data-bound-to-the-value-of-a-radio-button
 */

var vm = {
    complimentaryCustomerList:[{Surname: 'sur', GivenName: 'given'}, {Surname: 'sur1', GivenName: 'given1'}],
    complimentaryJSHolder: ko.observable(),
    complimentaryJSONHolder: ko.observable()
}

vm.complimentaryJSONHolder.subscribe(function(nv){
    console.log("JSON " + nv)
    var js = JSON.parse(nv)
    vm.complimentaryJSHolder(js)
})
 
vm.complimentaryJSHolder.subscribe(function(nv){
    console.log("JS: " + nv + " : " + ko.toJSON(nv))
})

ko.applyBindings(vm)
 
vm.complimentaryJSONHolder(ko.toJSON({Surname: 'sur1', GivenName: 'given1'}))