Javascript 删除后删除视图未从视图中删除项

我有一段代码，它成功地从页面上显示的考试列表中删除了一个考试，但页面上仍然显示了已删除的考试。必须手动刷新页面才能更新视图。我们在其他页面上使用了simlar模式，它工作正常。我不明白为什么它在这个页面上不起作用

 // Used to handle the click event for Delete
    remove = (exam: Models.Exam) => {
        $("#loadingScreen").css("display", "block");
        var examService = new Services.ExamService();

        examService.remove(exam.examId()).then(() => {
            examService.getByFid().then((examinations: Array<Models.Exam>) => {


                this.exams(examinations);

                this.template("mainTemplate");
            });
        }).fail((error: any) => {
                // Add this error to errors
                this.errors([error]);
                window.scrollTo(0, 0);
            }).fin(() => {
                $("#loadingScreen").css("display", "none");
            });
    }

//用于处理删除的单击事件
移除=（检查：Models.exam）=>{
$（“#加载屏幕”）.css（“显示”、“块”）；
var examService=new Services.examService（）；
examService.remove（exam.examId（））。然后（（）=>{
examService.getByFid（）。然后（（检查：数组）=>{
这.考试(考试),；
本模板（“主模板”）；
});
}).失败（（错误：任意）=>{
//将此错误添加到错误中
这是错误（[error]）；
滚动到（0，0）；
}).fin（（）=>{
$（“#加载屏幕”）.css（“显示”、“无”）；
});
}

下面是显示考试列表的UI代码

    <div class="section module">
        <!-- ko if: exams().length > 0 -->
        <!-- ko foreach: exams.sort(function(a,b){return a.mostRecentDateTaken() > b.mostRecentDateTaken() ? 1:-1}) -->
        <div class="addremove_section bubbled">
            <a class="button open_review" data-bind="click: $root.edit">Edit</a>
            <a class="button open_review" data-bind="click: $root.remove">Delete</a>
            <div class="titleblock">
                <h4 data-bind="text: 'Exam Name: ' + examTypeLookup().examTypeName()"></h4>
                <div data-bind="if:examEntityLookup()!=null">
                    <div data-bind=" text: 'Reporting Entity: ' + examEntityLookup().description()"></div>
                </div>
                <div data-bind="text: 'Most recent date taken: ' +  $root.formatDate(mostRecentDateTaken())"></div>
                <div data-bind="text: 'Number of attempts: ' + numberOfAttempts()"></div>
                <div data-bind="text: 'Pass/Fail Status: ' + $root.PassFailEnum(passFailId())"></div>
            </div>
            <div class="clearfix"></div>
        </div>
        <!-- /ko -->
        <!-- /ko -->
        <!-- ko if: exams().length == 0 -->
        <div class="addremove_section bubbled">
            <div class="titleblock">
                <div>No Exams Have Been Entered.</div>
            </div>
        </div>
        <!-- /ko -->
    </div>

编辑
删去
没有参加任何考试。

编辑：我发现如果我从视图中的此行中删除排序

<!-- ko foreach: exams.sort(function(a,b){return a.mostRecentDateTaken() > b.mostRecentDateTaken() ? 1:-1}) -->

到

---

它起作用了！唯一的问题是我需要对数据进行排序。

我从视图中删除了排序，并在服务中进行了排序。不太清楚为什么我不能在视图中排序。我想这是一个knockout.js错误

<!-- ko foreach: exams -->


        [HttpGet]
        [Route("api/exam")]
        public IEnumerable<TDto> GetApplicantExams()
        {

                var dtos = GetCollection(() => _examService.GetApplicantExams(UserContext.Fid).OrderBy(e => e.DateTaken));
                return dtos.ForEach(t => AddItems(t));

        }

[HttpGet]
[路线（“api/考试”）]
公共IEnumerable GetApplicationExams（）
{
var dtos=GetCollection（（）=>_examService.getapplicationtexams（UserContext.Fid）.OrderBy（e=>e.datetake））；
返回dtos.ForEach（t=>AddItems（t））；
}

这不是淘汰赛中的错误。由于排序调用（正如您所做的）不受计算/依赖的可观察对象的控制，因此没有任何东西可以触发它。您基本上已经断开了UI（或者更严格地说，是bindingHandler）和ko用来跟踪更改的

ko.observable

之间的连接

我在工作中多次遇到这种情况，我使用的一般模式如下：

var viewmodel = {
    listOfObjects:ko.observableArray(),
    deleteFromList:deleteFromList,
    addToList:addToList,
}

//in your HTML,  you'll do a foreach: listOfSortedObjects (instead of listOfObjects)
viewmodel.listOfSortedObjects = ko.computed(function(){
    //Since this is *inside* the change tracking ecosystem, this sort will be called as you would expect
    return viewmodel.listOfObjects().sort(yourSortingFunction);
});

//Since you cannot edit a (normal) computed,  you need to do your work on the original array as below.

function deleteFromList(item){
    viewmodel.listOfObjects.remove(item);//Changing this array will trigger the sorted computed to update, which will update your UI
}
function addToList(item){
    viewmodel.listOfObjects.push(item);
}

---

您是否已确认删除后的检查确实不包含删除的元素，并且此.exames（exames）；实际上改变了可以观察到的考试？也许你的“this”实际上并没有指向你期望的，而是应该做的：var self=this；在调用服务并使用“self”instead之前，我从此行中删除了排序，它可以正常工作！非常奇怪。我从未尝试过在绑定时以这种方式进行排序，因为排序实际上会改变数组。尝试在填充可观察的this.examies（检查）之前或之后进行排序；而不是在视图中，或使用计算的可观察对象。

var viewmodel = {
    listOfObjects:ko.observableArray(),
    deleteFromList:deleteFromList,
    addToList:addToList,
}

//in your HTML,  you'll do a foreach: listOfSortedObjects (instead of listOfObjects)
viewmodel.listOfSortedObjects = ko.computed(function(){
    //Since this is *inside* the change tracking ecosystem, this sort will be called as you would expect
    return viewmodel.listOfObjects().sort(yourSortingFunction);
});

//Since you cannot edit a (normal) computed,  you need to do your work on the original array as below.

function deleteFromList(item){
    viewmodel.listOfObjects.remove(item);//Changing this array will trigger the sorted computed to update, which will update your UI
}
function addToList(item){
    viewmodel.listOfObjects.push(item);
}