CODEWITHSUNDEEP
javascriptuser-interfaceknockout.js
Bhavik
Bhavik

Reputation: 4904

knockout observable array update not updating the UI

When I update an observable element of Knockout the UI is not getting update
HTML

<tbody data-bind="foreach: students, visible: !students().isDeleted">
     <tr>
         <td data-bind="text: RollNo"></td>
         <td data-bind="text: Name"></td>
         <td data-bind="text: Phone"></td>
         <td data-bind="text: Email"></td>
         <td>
             <a href="#" data-bind="click: $root.editStudent">Edit</a>
             <a href="#" data-bind="click: $root.deleteStudent">Delete</a>
         </td>
     </tr>
</tbody>

Javascript

function StudentModel(student){
    this.RollNo = ko.observable(student.RollNo);
    this.Name = ko.observable(student.Name);
    this.Phone = ko.observable(student.Phone);
    this.Email = ko.observable(student.Email);
    this.isDeleted = ko.observable(student.isDeleted);
    this.isEdited = ko.observable(student.isEdited);
}

function StudentViewModel() {
    //Array of students
    this.students = ko.observableArray();

    //Data retrived from the server
    var listStudent= JSON.parse(@Html.Raw(ViewBag.StudentsList));;
    var mappedStudents = $.map(listStudent, function(student) { return new StudentModel(student) });

    //Map it to show the data
    this.students(mappedStudents);

    //Delete student
    this.deleteStudent= function(student){
        var stu = this.students()[this.students.indexOf(student)];
        stu.isDeleted(true);
    }.bind(this);

When I click on Delete the UI is not updated... When I try stu.isDeleted=true; still it does not works... Any help would be appreciated...

Fiddle

Upvotes: 0

Views: 231

Answers (1)

Sjoerd
Sjoerd

Reputation: 660

The problem is in the databinding.

visible: !students().isDeleted

This looks up the isDeleted property in the observable array. Which doesn't exist, so it is false and will always show all the elements.

If you want to hide the students the visible binding should be on the <tr>.

If you want to remove the student from the observable array you can just remove it.

http://jsfiddle.net/8fALs/2/

Upvotes: 1

Related Questions