Sending only the updated object from ko.observableArray

Question

How can I send only the updated model from an observable Array instead of sending the entire array?

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

Now I want to get only that particular student from course whose info is updated. Assuming that when we add a new class we can dynamically add new students to it on the go. Supposing that you have to validate the previous student before adding a new one. When I get that particular student I want to send that student info back to the server.

Thanks.

Answer 1

If I understood your task right, you could use "arrayChange" event type to get exact changed (added/removed) items:

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

If you want to get list of students which have been modified, you can provide a flag to identify if an object has been modified in student object. Use .subscribe to modify that flag whenever a value is updated. Then use ko.computed or ko.pureComputed to get that list.

Also it supposes to be 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>