如何解决按属性对列表进行分组
嗨,我正在尝试对类列表进行表格分组。我正在关注此 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。