Radio button list inside jquery template using knockout

http://stackoverflow.com/questions/8135052/radio-button-list-inside-jquery-template-using-knockout

by rniemeyer

HTML

<script src="http://rniemeyer.github.com/KnockMeOut/Scripts/jquery.tmpl.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-2.2.1.debug.js"></script>
<div data-bind="template:{name:'questionTemplate',foreach:questionResponses}"></div>
<hr/>
<button data-bind="click: submit">Save</button>

<script type="text/x-jquery-tmpl" id="questionTemplate">
        <div class="questions">
               <div data-bind="text: QuestionText" style="font-weight:bold;"></div>
               {{if QuestionType == "FreeForm" }}
                       <textarea rows="3" cols="50" data-bind="value: ResponseValue"></textarea>
                   {{/if}}

                   {{if QuestionType != "FreeForm" }}
                       <table>
                        {{each(i,option) Options}}
                        <tr>
                       <td>
                       <input type="radio" data-bind="attr:{name:QuestionId, value: option.Value }, checked: $data.ResponseValue" />${option.Value}</td><td>- ${option.ResponsePercent} %</td> 
                       </tr>
                        {{/each}}
                       </table>    
                   {{/if}} 
            </div>
</script>

JavaScript

function Question(id, text, type, options, response) {
    this.QuestionId = id;
    this.QuestionText = text;
    this.QuestionType = type;
    this.Options = options;
    this.ResponseValue = response;
}

var viewModel = {
    questionResponses: ko.observableArray([
        new Question(1, "Question One", "NotFreeForm", [{Value: "1-A", ResponsePercent: "60"},{Value: "1-B", ResponsePercent: "40"}], "1-A"),
        new Question(2, "Question Two", "FreeForm", null, "Question Two Response"),
        new Question(3, "Question Three", "NotFreeForm", [{Value: "3-A", ResponsePercent: "60"},{Value: "3-B", ResponsePercent: "40"}], "3-B")
    ]),
    submit: function() {
       alert(ko.toJSON(viewModel));   
    }
};

ko.applyBindings(viewModel);