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

이렇게하면 모든 것이 잘 캡슐화됩니다.

희망이 도움이됩니다.