按属性对列表进行分组

Question

您好，我正在尝试对 class 列表进行 table 分组。我正在按照此 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", "MATH1030", "Calculus", "City1"));
    if (self.gpCourseCode().indexOf("MATH1030") == -1) {
        self.gpCourseCode.push("MATH1030");
    }
    self.courses.push(new course("3", "MATH1030", "Calculus", "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", "MATH1006", "Linear algebra", "City1"));
    if (self.gpCourseCode().indexOf("MATH1006") == -1) {
        self.gpCourseCode.push("MATH1006");
    }
    self.courses.push(new course("7", "MATH1046", "Discrete Math", "City1"));
    if (self.gpCourseCode().indexOf("MATH1046") == -1) {
        self.gpCourseCode.push("MATH1046");
    }
}

Answer 1

.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", "MATH1030", "Calculus", "City1"));
    if (self.gpCourseCode().indexOf("MATH1030") == -1) {
        self.gpCourseCode.push("MATH1030");
    }
    self.courses.push(new course("3", "MATH1030", "Calculus", "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", "MATH1006", "Linear algebra", "City1"));
    if (self.gpCourseCode().indexOf("MATH1006") == -1) {
        self.gpCourseCode.push("MATH1006");
    }
    self.courses.push(new course("7", "MATH1046", "Discrete Math", "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>

按属性对列表进行分组

Grouping a list by a property

javascript

c#

html

knockout.js

knockout-2.0

按 属性 对列表进行分组

Grouping a list by a property

javascript

c#

html

knockout.js

knockout-2.0

按属性对列表进行分组