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>