knockout.js 删除Foreach创建重复项

sirbozc5  于 2023-02-16  发布在  其他
关注(0)|答案(1)|浏览(182)

在UI上,我们有符合评估条件的教室。创建并添加符合条件的教室后,我将获得每个教室类型的副本。预期输出是每个教室的一个。
相关HTML:

<div class="eligible-classrooms">
    <h5 class="semi-bold btm-gap-sm">Eligible Classrooms</h5>
    <div class="classrooms">
        <!-- ko foreach: model.sortedEligibleClassrooms -->
        <div class="classroom">
            <span data-bind="text: $data.ageRangeTypeName"></span><span class="count" data-bind="text: $data.numClassrooms"></span>
        </div>
        <!-- /ko -->

    </div>
</div>

相关 typescript :
型号:

numberOfEligibleClassrooms: KnockoutObservableArray<{ ageRangeTypeId: number, ageRangeTypeName: string, numClassrooms: number }>,
sortedEligibleClassrooms: KnockoutComputed<Array<{ ageRangeTypeId: number, ageRangeTypeName: string, numClassrooms: number }>>

self.model:

numberOfEligibleClassrooms: ko.observableArray([]),
    sortedEligibleClassrooms: null,

 constructor(orgCaseId: number, observationType: ObservationTypeModel, orgObservationSetTypeId: number) {
        var self = this;

 self.model.sortedEligibleClassrooms = ko.computed(function () {
            return self.model.numberOfEligibleClassrooms().sort((left: { ageRangeTypeId: number, ageRangeTypeName: string, numClassrooms: number }, right: { ageRangeTypeId: number, ageRangeTypeName: string, numClassrooms: number }): number => {
                return left.ageRangeTypeId > right.ageRangeTypeId ? 1 : -1;
            });
        }, self.model.numberOfEligibleClassrooms);
    self.load = (): void => {
        CommonFactory.AppSettings.get('OrgClassroomCollectMajorityAgeRange', function (setting: IApplicationSetting) {
            const majorityAgeRangeEnabled = setting ? setting.value.toString().toLowerCase() === 'true' : false;
            OrgFactory.ObservationTypeAgeRangeTypes.search({ "observationTypeId": self.model.observationType.id(), isCount: true }, function (ageRangeTypes) {
                for (var j = 0; j < ageRangeTypes.length; j++) {
                    // The following function preserves the scope of the variables 
                    (function (ageRangeTypeId, ageRangeTypeName) {
                        var minimumAgeRangeTypeId = self.settings.isERSObservation() ? ageRangeTypeId : null;
                        var search = {
                            minimumAgeRangeTypeId: minimumAgeRangeTypeId,
                            includesAgeRangeTypeId: majorityAgeRangeEnabled ? null : ageRangeTypeId,
                            majorityAgeRangeTypeId: majorityAgeRangeEnabled ? ageRangeTypeId : null,
                            isCount: true
                        };
                        OrgFactory.OrgCase.getEligibleObservationClassrooms(orgCaseId, search, function (data) {
                            self.model.numberOfEligibleClassrooms.push({ ageRangeTypeId: ageRangeTypeId, ageRangeTypeName: ageRangeTypeName, numClassrooms: data.length });
                        });
                    })(ageRangeTypes[j].ageRangeTypeId, ageRangeTypes[j].ageRangeTypeName);
                }
            });
        });
    }

输出:

qojgxg4l

qojgxg4l1#

为了解决这个问题,我创建了一个distinctEligibleClassrooms方法,该方法对符合条件的教室列表进行明确排序:

//creates a distinct array of eligible classrooms.
        self.model.distinctEligibleClassrooms = ko.computed(function () {
            const classrooms = self.model.numberOfEligibleClassrooms();
            const seen = {};
            const distinctClassrooms = classrooms.filter(classroom => {
                if (!seen[classroom.ageRangeTypeId]) {
                    seen[classroom.ageRangeTypeId] = true;
                    return true;
                }
                return false;
            });
            return distinctClassrooms;
        }, self.model.numberOfEligibleClassrooms);

我将其直接添加到当前的sortedEligibleClassrooms方法下,并将其删除,因为它将不再使用。

相关问题