ko.observableArray에서 업데이트 된 객체 만 전송

Question

전체 배열을 전송하는 대신 관찰 가능 어레이에서 업데이트 된 모델 만 전송하려면 어떻게해야합니까?

var student = function(){ 
    this.studentId=0; 
    this.firstName=ko.obserable(); 
    this.lastName=ko.obserable(); 
} 
var course= function(){ 
    this.courseId=0; 
    this.students=ko.obserableArray([]); 
    this.Name=ko.obserable(); 
} 

이제 정보가 업데이트 된 코스에서 특정 학생 만 얻고 싶습니다. 새로운 클래스를 추가 할 때 우리는 이동 중에 새로운 학생들을 동적으로 추가 할 수 있다고 가정합니다. 새로운 학생을 추가하기 전에 이전 학생을 확인해야한다고 가정하십시오. 그 특정 학생을 입회하면 그 학생 정보를 다시 서버로 보내려고합니다.

감사합니다.

Answer 1

나는 당신의 작업 권리를 이해하면 정확한 변경하려면 "arrayChange"이벤트 유형 (추가/제거) 항목을 사용할 수 있습니다 : 당신은 수정 된 학생들의 목록을 얻고 싶다면

sourceArray = ko.observableArray(); 
sourceArray.subscribe(function (changes) { 
     changes.forEach(function(arrayChange) { 
      if(arrayChange.status === 'added') { 
       // some code on add 
      } else if(arrayChange.status === 'deleted') { 
       // some code on delete 
      } 
     }); 
    }, null, "arrayChange"); 

Answer 2

을, 학생 객체에서 객체가 수정되었는지 여부를 식별하는 플래그를 제공 할 수 있습니다. .subscribe을 사용하여 값이 업데이트 될 때마다 해당 플래그를 수정하십시오. 그런 다음 ko.computed 또는 ko.pureComputed을 사용하여 해당 목록을 가져옵니다.

또한 observable으로 가정합니다.

var student = function (id, firstName, lastName) { 
 
    var self = this; 
 
    self.hasChanged = ko.observable(false); 
 
    var modified = function(){ 
 
    self.hasChanged(true); 
 
    }; 
 

 
    self.studentId = ko.observable(id); 
 
    self.firstName = ko.observable(firstName); 
 
    self.firstName.subscribe(modified); 
 
    self.lastName = ko.observable(lastName); 
 
    self.lastName.subscribe(modified); 
 
} 
 
var course= function(){ 
 
    var self = this; 
 
    self.courseId = 0; 
 
    self.students = ko.observableArray([new student(1, "Cristiano", "Ronaldo"), new student(2, "Lionel", "Messi")]); 
 
    self.modifiedStudent = ko.computed(function(){ 
 
    return ko.utils.arrayFilter(self.students(), function(student) { 
 
     return student.hasChanged(); 
 
    }); 
 
    }, self); 
 
    self.Name = ko.observable("Programming 101"); 
 
} 
 

 
$(document).ready(function() { 
 
    var myViewModel = new course(); 
 
    ko.applyBindings(myViewModel); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
List of all students: 
 
<div data-bind="foreach: students"> 
 
    <div> 
 
    <span data-bind="text: studentId"></span> 
 
    <input type="text" data-bind="value: firstName" /> 
 
    <input type="text" data-bind="value: lastName" /> 
 
    </div> 
 
</div> 
 
<br/> 
 

 
List of students which has been modified: 
 
<div data-bind="foreach: modifiedStudent"> 
 
    <div> 
 
    <span data-bind="text: studentId"></span> 
 
    <input type="text" data-bind="value: firstName" readonly /> 
 
    <input type="text" data-bind="value: lastName" readonly /> 
 
    </div> 
 
</div>