Model view controller knockout.js-从模型的子列表中添加/删除项

我有一个foreach模板，在页面上显示作业列表。在每一份工作中，我都有一份工作笔记清单。我在设置适当的可观察对象以允许在视图中更新作业注释时遇到问题

以下是指向JSFIDLE的链接：

或者，这是目前的代码。我不确定是将子列表的可观察数组放入作业对象本身还是视图中

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

函数JobNote（）{
this.Text=“一些文本！”；
}
职能职务（）{
this.JobTitle=ko.observable（“某项工作”）；
this.CompanyName=ko.observable（“某公司”）；
this.City=ko.observable（“某个城市”）；
这个状态=可观察的（“某些状态”）；
this.Notes=ko.array([
新工单（），
新工单（），
]);
this.someValue=ko.observable（）.extend（{defaultIfNull:“somedefault”}）；
this.expanded=ko.可观察（假）；
this.linkLabel=ko.computed（函数（）{
返回此.expanded（）？“collapse”：“expand”；
}，这个）；
};
var viewModel=函数（）{
这个.jobs=ko.array([
新作业（），
新作业（），
新作业（），
新作业（），
新作业（），
新作业（），
新作业（），
新作业（），
新作业（），
新作业（），
]);
this.toggle=功能（项）{
item.expanded（！item.expanded（））；
}
this.addNote=函数（作业）{
//这里应该放什么？
}    
};
应用绑定（新的viewModel（））；​

正如Niko在本场景中所说，我将向类中添加该方法。像这样

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());
    }    
};

这使一切都很好和封装

希望这能有所帮助。

我会将

addNote（）

放在“作业”中，因为您正在修改的可观察对象是“作业”的一部分。