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

Question

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

这里是一个的jsfiddle链接：http://jsfiddle.net/b3B8p/

或者，这里是代码，因为它主张。我不知道是否向子表的观察到的阵列到招聘对象本身或进入查看...

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

Answer 1

正如尼科在这种情况下说我的方法添加到类。像这样。

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

这使得一切都很好，并封装。

希望这会有所帮助。