淘汰赛可观察到的数组更新不更新UI

Question

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

Answer 1

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/