knockout.js - add/remove items from child list of model - model-view-controller

Question

I have a foreach template displaying a list of jobs on a page. Inside each job I have a list of job notes. I'm having trouble setting up the proper observable to allow for the job notes to be updated in the view.
Here is a link to a jsFiddle: http://jsfiddle.net/b3B8p/
Or, here is the code as it stands. I'm not sure whether to put the observable array of the sublist into the Job object itself or into the View...
<div data-bind="foreach: jobs">
<div>
<div class="jobContainer">
<label data-bind="text: JobTitle"></label>
<label data-bind="text: CompanyName"></label>
<div class="jobDetails" data-bind="visible: expanded">
<label data-bind="text: City"></label>
<label data-bind="text: State"></label>
<div data-bind="foreach: Notes">
<label data-bind="text: Text"></label>
</div>
</div>
<div>
Expand
Add Note
</div>
</div>
function JobNote() {
this.Text = "some text!";
}
function Job() {
this.JobTitle = ko.observable("some job");
this.CompanyName = ko.observable("some company");
this.City = ko.observable("some city");
this.State = ko.observable("some state");
this.Notes = ko.observableArray([
new JobNote(),
new JobNote(),
]);
this.someValue = ko.observable().extend({ defaultIfNull: "some default" });
this.expanded = ko.observable(false);
this.linkLabel = ko.computed(function () {
return this.expanded() ? "collapse" : "expand";
}, this);
};
var viewModel = function () {
this.jobs= ko.observableArray([
new Job(),
new Job(),
new Job(),
new Job(),
new Job(),
new Job(),
new Job(),
new Job(),
new Job(),
new Job(),
]);
this.toggle = function (item) {
item.expanded(!item.expanded());
}
this.addNote = function(job) {
// what should go in here?
}
};
ko.applyBindings(new viewModel());​

Answer 1

As Niko said in this scenario I would add the method to the class. Like so.
function Job() {
var self = this;
this.JobTitle = ko.observable("some job");
this.CompanyName = ko.observable("some company");
this.City = ko.observable("some city");
this.State = ko.observable("some state");
this.Notes = ko.observableArray([
new JobNote(),
new JobNote(),
]);
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.toggle = function () {
self.expanded(!self.expanded());
};
this.addNote = function () {
self.Notes.push(new JobNote());
}
};
This keeps everything nice and encapsulated.
Hope this helps.