javascript - おしぼり/Knockout.js - observableArray の HTML 表示の問題

Question

次のオブジェクト/構造を使用しています: Course、SubCategory、SubUniversity、Category、SubCategory、CourseSchedule。

コースはサブカテゴリを 1 つだけ持つことができますが、多くのサブユニバーシティの一部にすることができます (したがって、1 つの Course と 1 つの SubUniversity を持つ CourseSchedule オブジェクト)。

各サブカテゴリには 1 つの親カテゴリがあります。各サブユニバーシティには 1 つの親大学があります。

courseadd ビューと courseedit ビューがあります。courseadd ビューで Course オブジェクトが作成されると、SubUniversities (CourseSchedules 経由) を courseedit ビューに追加できます。

SubUniversites を追加しようとすると、最初のものが 2 回表示されます。

後続の 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() {

                }
            }
        };

データベースのデータは正しいため、これはノックアウト バインディングの問題のようです。最初の値が 2 回バインドされる原因は何ですか?

Answer 1

以下はキーコードです。サブユニバーシティが削除された行を非表示にする場合。サブユニバーシティを使用すると、重複の問題が解決されます。この問題は、subuniversity().subuniversityname の呼び出しによって発生しました。() は、バインドされたアイテムと表示されたアイテムの間の関係を壊しました。保存が呼び出されたときに 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 が呼び出されるのを待っているコレクションにアイテムを追加します。キャンセルボタンがあるので、よろしければよさそうです。このコンテキストで項目が追加された場合、delete 関数は追加をキャンセルします。それ以外の場合は、削除済みとして設定します。マークアップの 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();
        }
    }
};