javascript - Hot Towel/Knockout.js - observableArray 的 HTML 显示问题

Question

我正在使用以下对象/结构：Course、SubCategory、SubUniversity、Category、SubCategory、CourseSchedule。

一门课程可以只有一个子类别，但可以是许多子大学的一部分（因此 CourseSchedule 对象具有一门课程和一门子大学）。

每个子类别都有一个父类别；每个子大学都有一所母大学。

我有一个 courseadd 视图和一个 courseedit 视图。一旦使用 courseadd 视图创建了 Course 对象，就可以在 courseedit 视图中添加子大学（通过 CourseSchedules）。

当我尝试添加 SubUniversites 时，第一个出现两次。

当我添加后续的 SubUniversites 时，它们会正确显示，而第一个仍然被复制。

这是查看代码

<section id="course-edit" class="view">
    <h3 class="page-title" data-bind="text: title"></h3>
    <div class="button-bar">
        <button class="btn btn-info"
            data-bind="click: goBack"><i class="icon-hand-left"></i></button>
        <button class="btn btn-info"
            data-bind="click: cancel, enable: canSave"><i class="icon-undo"></i> Cancel</button>
        <button class="btn btn-info"
                data-bind="click: save, enable: canSave"><i class="icon-save"></i> Save</button>
        <button class="btn btn-danger"
                data-bind="click: deleteCourse, disable: hasChanges">
            <i class="icon-trash"></i> Delete
        </button>
        <i class="icon-asterisk" data-bind="visible: hasChanges"></i>
    </div>
    <div data-bind="with: course">
        <div>
            <label for="courseName">Name</label>
            <input id="courseName" data-bind="value: courseName" placeholder="Course Name" />
        </div>
        <div>
            <label for="category">Category</label>
            <select id="category" data-bind="options: $parent.subcategories, optionsText: 'subCategoryName', value: subCategory"></select>
        </div>
        <div>
            <label for="courseMaterialURL">Material URL</label>
            <input id="courseMaterialURL" data-bind="value: courseMaterialURL" placeholder="http://" />
        </div>
        <div>
            <label for="courseImageURL">Image URL</label>
            <input id="courseImageURL" data-bind="value: courseImageURL" placeholder="http://" />
        </div>
        <div>
            <label for="courseDescription">Description</label>
            <textarea id="courseDescription" data-bind="value: courseDescription" placeholder="Course Description" rows="4"></textarea>
        </div>
        <div style="width:600px">
            <div style="float:right">
                <label for="courseUniversity">&nbsp;</label>
                <section id="courseScheduleNode" class="view-list" data-bind="foreach: courseSchedules" >
                    <article>
                        <div>
                            <span style="margin-right: 10px" data-bind="text: subUniversity().subUniversityName"></span>
                            <button class="btn btn-danger" data-bind="click: $root.removeSubUniversity" style="float:right"><i class="icon-remove"></i></button>
                        </div>
                        <br />
                    </article>
                </section>
            </div>
            <div>
                <label for="courseUniversity">Add University</label>
                <select id="courseUniversity" data-bind="options: $parent.subuniversities, optionsText: 'subUniversityName', value: selectedSubUniversity, optionsCaption: ' '"></select>
                <button class="btn btn-success" data-bind="click: $parent.addSubUniversity"><i class="icon-ok"></i></button>
            </div>
        </div>
    </div>
</section>

这部分视图模型是添加和删除 onClick 函数的代码。

var addSubUniversity = function (selectedCourse) {
            if (selectedCourse) {
                var cs = datacontext.createCourseSchedule();
                cs.courseId(selectedCourse.id());
                cs.subUniversityId(selectedCourse.selectedSubUniversity().id());
                selectedCourse.courseSchedules.push(cs);
                save();
            }
        };

        var removeSubUniversity = function (selectedCourseSchedule) {
            if (selectedCourseSchedule) {
                selectedCourseSchedule.entityAspect.setDeleted();
                save().then(success).fail(failed).fin(finish);

                function success() {
                    inflateCourseSchedules();
                }

                function failed(error) {
                    cancel();
                    var errorMsg = 'Error: ' + error.message;
                    logger.logError(errorMsg, error, system.getModuleId(vm), true);
                }

                function finish() {

                }
            }
        };

数据库中的数据是正确的，因此这似乎是敲除绑定问题。什么会导致第一个值绑定两次？

Answer 1

下面是关键代码。如果子大学隐藏已删除的行。与子大学一起解决了重复问题。问题是由调用 subuniversity().subuniversityname 引起的。() 破坏了绑定项和显示项之间的关系。当调用 save 时，id 被更改，导致敲除认为它是一个新项目并再次绑定它，导致显示的集合与数据绑定集合不同步。

<!-- ko if: subUniversity -->
<article>
    <div>
        <!-- ko with: subUniversity -->
        <span style="margin-right: 10px" data-bind="text: subUniversityName"></span>
        <!-- /ko -->
        <button class="btn btn-danger" data-bind="click: $root.removeSubUniversity" style="float:right"><i class="icon-remove"></i></button>
    </div>
    <br />
</article>
<!-- /ko -->

下面是一些更有用的代码。add 函数将项目添加到等待调用 save 的集合中。既然你有取消按钮，如果它被兑现就好了。如果项目是在此上下文中添加的，则删除函数会取消添加。否则将其设置为已删除。由于标记中的 if 语句删除的项目从列表中消失。

var addSubUniversity = function (selectedCourse) {
    if (selectedCourse) {
        var cs = datacontext.createCourseSchedule();
        cs.courseId(selectedCourse.id());
        cs.subUniversityId(selectedCourse.selectedSubUniversity().id());
        selectedCourse.courseSchedules.push(cs);
    }
};

var removeSubUniversity = function (selectedCourseSchedule) {
    if (selectedCourseSchedule) {
        if (selectedCourseSchedule.entityAspect.entityState.isAdded()) {
            selectedCourseSchedule.entityAspect.rejectChanges();
            course().courseSchedules.remove(selectedCourseSchedule);
        }
        else
        {
            selectedCourseSchedule.entityAspect.setDeleted();
        }
    }
};