Knockout checked binding with foreach

https://groups.google.com/d/topic/knockoutjs/bYOKuVFIMHs/discussion

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/jquery.tmpl.js"></script>
<script src="https://github.com/SteveSanderson/knockout/raw/master/build/output/knockout-latest.debug.js"></script>
Preferred flavor of spam:
<div data-bind="template: { name:'flavor_tmpl', foreach: spamFlavors, templateOptions: { selected: spamFlavor } }">
</div>

<script type="text/x-jquery-template" id="flavor_tmpl">
    <div>
        <input type="radio" name="flavorGroup" value="${id}" data-bind="checked: $item.selected" /> 
        <span data-bind="text: name" /> 
    </div>
</script>


<!-- ------------------------------------------- -->
<div id="console">
    <button data-bind="click: clearLog">Clear</button>
    <h2>Log</h2>
    <div id="log"></div>
</div>

CSS

#console {
    margin-top: 2em;
    padding: 0.2em;
    background: #eeeeff;
}
#console button {
    float: right;
}
#log {
    clear: both;
    font: 8pt monospace;
}

JavaScript

var viewModel = {
    spamFlavors: ko.observableArray([
        { id: 'cherry', name: "Cherry" },
        { id: 'almond', name: "Almond" },
        { id: 'msg', name: "Monosodium Glutamate" }
    ]),
    spamFlavor: ko.observable("almond")
};

viewModel.spamFlavor.subscribe(function() {
    log("spamFlavor is now: " + viewModel.spamFlavor());
});

///////////////////////////
ko.applyBindings(viewModel);


///////////////////////////
function log(message) {
  $("#log").append(document.createTextNode(message)).append("<br/>");
}

function clearLog() {
    $("#log").empty();
}