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

javascript:

var ViewModel = function () {

    var self = this;
    // an array of retrieved user objects
    self.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());