Dom knockout.js-列表中的数据绑定子项

鉴于本页上给我的亲切示例：

我想在每个作业中添加一个名为“作业注释”的子项列表。假设现在JobNote的结构是“Id”和“Text”。如何将作业列表中的子项列表数据绑定

---

谢谢。

这个问题的答案可以在这个jsFiddle上找到

​var json=[
{
“职务名称”：“投资银行助理”，
“公司名称”：“价值线咨询”，
“城市名称”：“悉尼-澳大利亚”，
“JobIndustry”：“咨询-通用”，
“工作说明”：[
{
“Id”：4，
“JobId”：1474，
“文本”：“测试注释！”}
],
“Id”：1474}
]
功能作业说明（数据）{
this.text=data.text；
}
功能作业（数据）{
var self=这个；
这个数据=数据；
this.notes=ko.observearray（[]）；
//新工作通知（“注1”），
//新工作通知（“注2”），
//     ]);
var mappedNotes=$.map（data.JobNotes，函数（项）{returnnewjobnote（项）}）；
本.注释（mappedNotes）；
this.someValue=ko.observable（）.extend({
defaultIfNull：“一些默认值”
});
this.expanded=ko.可观察（假）；
this.linkLabel=ko.computed（函数（）{
返回此.expanded（）？“collapse”：“expand”；
}，这个）；
this.deleteNote=函数（jobNote）{
self.notes.remove（作业通知）；
}
};
var viewModel=函数（）{
var self=这个；
this.jobs=ko.array([
//新工作（json），
//新作业（），
//新作业（），
]);
this.toggle=功能（项）{
item.expanded（！item.expanded（））；
}
this.addNote=函数（作业）{
job.notes.push（新工作通知（“新通知”））；
}
var mappedJobs=$.map（json，函数（项）{
返回新作业（项目）
})在这里输入代码`
self.jobs（mappedJobs）；
};
应用绑定（新的viewModel（））；​

<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>
                     <a href="#" data-bind="click: $parent.deleteNote ">Remove</a>                    
                </div> 
            </div>                           
        <div>
        <a href="#" data-bind="click: $parent.toggle, text: linkLabel">Expand</a> 
        <a href="#" data-bind="click: $parent.addNote">Add Note</a>  
    </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());​