I think you can do this like that:
function Question(id, name) {
this.id = id;
this.name = name;
this.answers = ko.observableArray();
}
function Answer(id, name) {
this.id = id;
this.name = name;
}
function ViewModel() {
this.questions = ko.observableArray();
var self = this;
//dummy data
self.init = function () {
var q1 = new Question(1, "Question 1");
var q1a1 = new Answer(1, "Option 1");
var q1a2 = new Answer(2, "Option 2");
q1.answers([q1a1, q1a2]);
var q2 = new Question(2, "Question 2");
var q2a1 = new Answer(1, "Option 1");
var q2a2 = new Answer(2, "Option 2");
var q2a3 = new Answer(3, "Option 3");
q2.answers([q2a1, q2a2, q2a3]);
var q3 = new Question(3, "Question 3");
var q3a1 = new Answer(1, "Option 1");
var q3a2 = new Answer(2, "Option 2");
var q3a3 = new Answer(3, "Option 3");
q3.answers([q3a1, q3a2, q3a3]);
self.questions([q1, q2, q3]);
};
self.init();
}
And bind view model like that:
<div data-bind="foreach:questions">
<div data-bind="attr:{id :id}" class="question">
<h2><label data-bind="text :name" /></h2>
<div class="option">
<table data-bind="attr:{id : id}">
<tbody data-bind="foreach:answers">
<tr>
<td data-bind="text:name"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Here is fiddle with example.
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…