Ko.js: Dynamically Generated Radio Buttons And 'checked' Dependent Computations

tl;dr: I use an ajax-retrieved array of objects to generate a list of radio buttons. When a radio button is checked, I want to make compute on the selected object and save the valu

Solution 1:

see this fiddle: http://jsfiddle.net/vt6v6L9u/2/

html:

<form><divdata-bind="foreach: retrievedUsers"><div><labeldata-bind="attr:{for:$index}"><inputtype="radio"name="people2"data-bind="attr: {id: $index,value: age}, checked: $root.selected" /><spandata-bind="text: name"></span></label></div></div></form><div>
    The selected person will be
    <spandata-bind="text: SelectedPersonAgeNextYear"></span>
    years old in the upcoming year.
</div><buttondata-bind="click: getUsers">get users</button>

javascript:

var ViewModel = function () {

    varself = this;
    // an array of retrieved user objectsself.retrievedUsers = ko.observable([]);

    self.getUsers = function () {
        self.retrievedUsers([{ 'name': 'Johnny', 'age': 20 }, { 'name': 'Jenny', 'age': 21 }]);
    };

    self.selected = ko.observable();
    self.SelectedPersonAgeNextYear = ko.computed(function () {
        return parseInt(self.selected(), 10) + 1;
    });
};

ko.applyBindings(new ViewModel());