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

這使得一切都很好，並封裝。

希望這會有所幫助。