Question

我正在使用以下对象/结构：课程，SubCategory，SubUniversity，Category，SubCategory，CourseSchedule。

一门课程可以只有一个子类别，但可以是许多子项目的一部分（因此，CourseSchedule对象包含一个课程和一个SubUniversity）。

每个SubCategory都有一个父类别;每个子大学都有一所母校。

我有一个courseadd视图和一个courseedit视图。使用courseadd视图创建Course对象后，可以在课程视图中添加SubUniversities（通过CourseSchedules）。

[Screenshot 0]

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

Screenshot 1

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

[Screenshot 2]

这是查看代码

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

viewmodel的这一部分是添加和删除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被更改，导致knockout认为它是一个新项目并再次绑定它导致显示的集合与数据绑定集合不同步。

<!-- 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();
        }
    }
};

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

1 个答案: