按属性对列表进行分组

问题描述

嗨，我正在尝试对类列表进行表格分组。我正在关注此 page 处的代码我遇到的问题是这一行

<ul data-bind="foreach: $root.people.index.type()[$data]">

就我而言，它在我的案例 courseCode 中不能很好地识别类型。

现在我是怎么做的

<table class="table table-striped">
    <thead>
        <tr>
            <th>ID</th>
            <th>Course Code</th>
            <th>Course Title</th>
            <th>Course Campus</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: gpCourseCode">
        <tr>
            <td data-bind="text: $data"></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr data-bind="foreach: $root.courses.index.courseCode()[$data]">
            <td><span data-bind="text: ID"></span></td>
            <td><span data-bind="text: courseCode"></span></td>
            <td><span data-bind="text: courseTitle"></span></td>
            <td><span data-bind="text: coursecampus"></span></td>
        </tr>
    </tbody>
</table>

这是我的 javascript

ko.observableArray.fn.distinct = function (prop) {
    var target = this;
    target.index = {};
    target.index[prop] = ko.observable({});

    ko.computed(function () {
        //rebuild index
        var propIndex = {};

        ko.utils.arrayForEach(target(),function (item) {
            var key = ko.utils.unwrapObservable(item[prop]);
            if (key) {
                propIndex[key] = propIndex[key] || [];
                propIndex[key].push(item);
            }
        });

        target.index[prop](propIndex);
    });

    return target;
};    

function course(_id,_courseCode,_courseTitle,_courseCampus) {
    var self = this;
    this.id = ko.observable(_id);
    this.courseCode = ko.observable(_courseCode);
    this.courseTitle = ko.observable(_courseTitle);
    this.coursecampus = ko.observable(_courseCampus);
}

function viewmodel() {
    var self = this;
    this.courses = ko.observableArray();
    this.gpCourseCode = ko.observableArray().distinct('courseCode');

    self.courses.push(new course("1","MATH1030","Calculus","City2"));
    if (self.gpCourseCode().indexOf("MATH1030") == -1) {
        self.gpCourseCode.push("MATH1030");
    }
    self.courses.push(new course("2","City1"));
    if (self.gpCourseCode().indexOf("MATH1030") == -1) {
        self.gpCourseCode.push("MATH1030");
    }
    self.courses.push(new course("3","City3"));
    if (self.gpCourseCode().indexOf("MATH1030") == -1) {
        self.gpCourseCode.push("MATH1030");
    }
    self.courses.push(new course("4","MATH1006","Linear algebra","City2"));
    if (self.gpCourseCode().indexOf("MATH1006") == -1) {
        self.gpCourseCode.push("MATH1006");
    }
    self.courses.push(new course("5","MATH1046","discrete Math","City2"));
    if (self.gpCourseCode().indexOf("MATH1046") == -1) {
        self.gpCourseCode.push("MATH1046");
    }
    self.courses.push(new course("6","City1"));
    if (self.gpCourseCode().indexOf("MATH1006") == -1) {
        self.gpCourseCode.push("MATH1006");
    }
    self.courses.push(new course("7","City1"));
    if (self.gpCourseCode().indexOf("MATH1046") == -1) {
        self.gpCourseCode.push("MATH1046");
    }
}

解决方法

.distinct('courseCode') 位于错误的可观察数组上。它应该在 this.courses = ko.observableArray() 上，因为这是您要分组的数组。

ko.observableArray.fn.distinct = function (prop) {
    var target = this;
    target.index = {};
    target.index[prop] = ko.observable({});

    ko.computed(function () {
        //rebuild index
        var propIndex = {};

        ko.utils.arrayForEach(target(),function (item) {
            var key = ko.utils.unwrapObservable(item[prop]);
            if (key) {
                propIndex[key] = propIndex[key] || [];
                propIndex[key].push(item);
            }
        });

        target.index[prop](propIndex);
    });

    return target;
};    

function course(_id,_courseCode,_courseTitle,_courseCampus) {
    var self = this;
    this.id = ko.observable(_id);
    this.courseCode = ko.observable(_courseCode);
    this.courseTitle = ko.observable(_courseTitle);
    this.coursecampus = ko.observable(_courseCampus);
}

function ViewModel() {
    var self = this;
    this.courses = ko.observableArray().distinct('courseCode');
    this.gpCourseCode = ko.observableArray();

    self.courses.push(new course("1","MATH1030","Calculus","City2"));
    if (self.gpCourseCode().indexOf("MATH1030") == -1) {
        self.gpCourseCode.push("MATH1030");
    }
    self.courses.push(new course("2","City1"));
    if (self.gpCourseCode().indexOf("MATH1030") == -1) {
        self.gpCourseCode.push("MATH1030");
    }
    self.courses.push(new course("3","City3"));
    if (self.gpCourseCode().indexOf("MATH1030") == -1) {
        self.gpCourseCode.push("MATH1030");
    }
    self.courses.push(new course("4","MATH1006","Linear algebra","City2"));
    if (self.gpCourseCode().indexOf("MATH1006") == -1) {
        self.gpCourseCode.push("MATH1006");
    }
    self.courses.push(new course("5","MATH1046","Discrete Math","City2"));
    if (self.gpCourseCode().indexOf("MATH1046") == -1) {
        self.gpCourseCode.push("MATH1046");
    }
    self.courses.push(new course("6","City1"));
    if (self.gpCourseCode().indexOf("MATH1006") == -1) {
        self.gpCourseCode.push("MATH1006");
    }
    self.courses.push(new course("7","City1"));
    if (self.gpCourseCode().indexOf("MATH1046") == -1) {
        self.gpCourseCode.push("MATH1046");
    }
}

ko.applyBindings(new ViewModel());

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<pre data-bind="text: ko.toJSON($root)"></pre>

<table class="table table-striped">
    <thead>
        <tr>
            <th>ID</th>
            <th>Course Code</th>
            <th>Course Title</th>
            <th>Course Campus</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: gpCourseCode">
        <tr>
            <td data-bind="text: $data"></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <!-- ko foreach: $root.courses.index.courseCode()[$data] -->
        <tr>
            <td><span data-bind="text: id"></span></td>
            <td><span data-bind="text: courseCode"></span></td>
            <td><span data-bind="text: courseTitle"></span></td>
            <td><span data-bind="text: coursecampus"></span></td>
        </tr>
        <!-- /ko -->
    </tbody>
</table>