挖空可观察数组更新不更新 UI

Question

当我更新 Knockout 的 observable 元素时，UI 没有得到更新
.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>

爪哇语

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

当我单击Delete时，UI 没有更新...当我尝试stu.isDeleted=true;仍然不起作用时...任何帮助将不胜感激...

小提琴

Answer 1

问题出在数据绑定上。

visible: !students().isDeleted

这将查找可观察数组中的 isDeleted 属性。它不存在，所以它是假的，并且将始终显示所有元素。

如果要隐藏学生，可见绑定应位于<tr>上。

如果要从可观察数组中删除学生，只需将其删除即可。

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