javascript - 删除后 knockout View 不会从 View 中删除项目

Question

我有这段代码，可以成功从页面上显示的考试列表中删除考试，但页面仍然显示已删除的考试。您必须手动刷新页面才能更新 View 。我们在其他页面上使用了类似的模式，并且它工作正常。我不明白为什么它在此页面上不起作用。

 // 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");
            });
    }

这是显示考试列表的 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>

编辑:我发现如果我从 View 中的这一行删除排序

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

至

<!-- ko foreach: exams -->

它有效!唯一的问题是我需要对数据进行排序。

Answer 1

我从 View 中删除了排序，并在服务中进行了排序。不太确定为什么我无法在 View 中排序。我认为这是一个 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));

        }