knockout.js - data-bind subitems within list - dom

Question

Given the the gracious example given to me on this page:
knockout.js - modify DOM in current item in list (expand list item subsection) using templates
I'd like to add a list of sub items called "JobNotes" inside of each job. Let's say for now the JobNote has a structure of "Id" and "Text". How would I databind a list of subitems in my list of jobs?
Thanks.

Answer 1

The answer to this question can be found on this jsFiddle
http://jsfiddle.net/R4Gnw/21/
<div data-bind="foreach: jobs">
<div>
<div class="jobContainer">
<label data-bind="text: data.JobTitle"></label>
<l`enter code here`abel data-bind="text: data.CompanyName"></label>
<div class="jobDetails" data-bind="visible: expanded">
<label data-bind="text: data.CityName"></label>
<label data-bind="text: data.JobIndustry"></label>
<div data-bind="foreach: notes">
<label data-bind="text: text"></label>
Remove
</div>
</div>
<div>
Expand
Add Note
</div>
</div>
​var json = [
{
"JobTitle": "Investment Banking Associate",
"CompanyName": "Value Line Consulting",
"CityName": "Sydney - Australia",
"JobIndustry": "Consulting - General",
"JobNotes": [
{
"Id": 4,
"JobId": 1474,
"Text": "A test Note!"}
],
"Id": 1474}
]
function JobNote(data) {
this.text= data.Text;
}
function Job(data) {
var self = this;
this.data = data;
this.notes = ko.observableArray([]);
// new JobNote("note1"),
// new JobNote("note2"),
// ]);
var mappedNotes = $.map(data.JobNotes, function(item) { return new JobNote(item) });
this.notes(mappedNotes);
this.someValue = ko.observable().extend({
defaultIfNull: "some default"
});
this.expanded = ko.observable(false);
this.linkLabel = ko.computed(function() {
return this.expanded() ? "collapse" : "expand";
}, this);
this.deleteNote = function(jobNote) {
self.notes.remove(jobNote);
}
};
var viewModel = function() {
var self = this;
this.jobs = ko.observableArray([
// new Job(json),
// new Job(),
// new Job(),
]);
this.toggle = function(item) {
item.expanded(!item.expanded());
}
this.addNote = function(job) {
job.notes.push(new JobNote("new note"));
}
var mappedJobs = $.map(json, function(item) {
return new Job(item)
});`enter code here`
self.jobs(mappedJobs);
};
ko.applyBindings(new viewModel());​