问题描述
在 Knockout.js 中,在数组中嵌套对象的最佳方法是什么?
我正在尝试创建一个按一组课程标题排序的可观察对象,并且在内部将为具有相同组属性(课程代码)的学生提供不同的课程。
这是我的片段
function course(_id,_code,_title,_campus) {
var self = this;
this.id = ko.observable(_id);
this.courseCode = ko.observable(_code);
this.courseTitle = ko.observable(_title);
this.coursecampus = ko.observable(_campus);
}
function gpCourseProperties(_code,_isHidden) {
var self = this;
this.gpCode = ko.observable(_code);
this.hide = ko.observable(_isHidden);
this.courses = ko.observableArray();
this.addCourse = function (_id,_courseCode,_courseTitle,_courseCampus) {
self.courses.push(new course(_id,_courseCampus));
}
this.switchMutated = function (code) {
self.hide(!self.hide());
};
this.switchText = ko.computed(function () {
if (self.hide() == true) {
return '+'
}
return '-';
},this);
}
function viewmodel() {
var self = this;
this.gpCourseProp = ko.observableArray();
self.gpCourseProp.push(new gpCourseProperties("MATH1030",true));
self.gpCourseProp.push(new gpCourseProperties("MATH1006",true));
self.gpCourseProp.push(new gpCourseProperties("MATH1046",true));
for (i = 0; i < self.gpCourseProp().length; i++) {
if (self.gpCourseProp()[i].gpCode == "MATH1030") {
self.gpCourseProp()[i].addCourse(new course("1","MATH1030","Calculus","City1"));
self.gpCourseProp()[i].addCourse(new course("2","City2"));
self.gpCourseProp()[i].addCourse(new course("3","City3"));
}
if (self.gpCourseProp()[i].gpCode == "MATH1006") {
self.gpCourseProp()[i].addCourse(new course("4","MATH1006","Linear algebra","City1"));
self.gpCourseProp()[i].addCourse(new course("6","City2"));
}
if (self.gpCourseProp()[i].gpCode == "MATH1046") {
self.gpCourseProp()[i].addCourse(new course("5","MATH1046","discrete Math","City1"));
self.gpCourseProp()[i].addCourse(new course("7","City2"));
}
}
}
var vm = new viewmodel();
ko.applyBindings(vm);
tr.mutated {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Course Code</th>
<th>Course Title</th>
<th>Course Campus</th>
</tr>
</thead>
<tbody data-bind="foreach: gpCourseProp">
<tr class="table-dark">
<td></td>
<td><span data-bind="text: $data.gpCode"></span></td>
<td><span></span></td>
<td></td>
</tr>
<!-- ko foreach: $data.courses -->
<tr data-bind="css: { mutated: $parent.mutated.hide() == true }">
<td><span data-bind="text: $data.id"></span></td>
<td><span data-bind="text: $data.courseCode"></span></td>
<td><span data-bind="text: $data.courseTitle"></span></td>
<td><span data-bind="text: $data.coursecampus"></span></td>
</tr>
<!-- /ko -->
</tbody>
</table>
我遇到的问题是尝试将课程添加到 gpCourseProperties。
解决方法
主要问题是:
- 当您初始化数据时,您只需将
dictionary = {"merry": "god","christmas": "jul","and": "och","happy": "gott","new": "nytt","year": "ar"} def translate(lst): new_list = [] #create an empty list to start with for i in lst: #to shuffle through every word in the list "lst" i = i.lower() #to make sure we don't mess up the translation because of a upper case letter if i in dictionary.keys(): #look up in the keys new_list.append(dictionary[i]) #we want the value of the key i. else: new_list.append(i) #return i if it does not exist in the dictionary. return new_list # test print(translate(['Merry','christmas','and','happy','new','year','mom']))
的参数push
到可观察数组。您需要使用gpCourseProperties
构建视图模型。 - 为
new
创建course
内容时,请选中courseProperties
。由于gpCode === "Some string"
是gpCode
,因此您需要使用observable
提取其值才能使其始终为真。
这是一个更新版本,只需进行最少的更改即可使其正常工作。 (注意,为了调试目的,我删除了隐藏某些行的 CSS)。
修复已在评论中标记。
()
function course(_id,_code,_title,_campus) {
var self = this;
this.id = ko.observable(_id);
this.courseCode = ko.observable(_code);
this.courseTitle = ko.observable(_title);
this.coursecampus = ko.observable(_campus);
}
function gpCourseProperties(_code,_isHidden) {
var self = this;
this.gpCode = ko.observable(_code);
this.hide = ko.observable(_isHidden);
this.courses = ko.observableArray();
this.addCourse = function (_id,_courseCode,_courseTitle,_courseCampus) {
self.courses.push(new course(_id,_courseCampus));
}
this.switchMutated = function (code) {
self.hide(!self.hide());
};
this.switchText = ko.computed(function () {
if (self.hide() == true) {
return '+'
}
return '-';
},this);
}
function ViewModel() {
var self = this;
this.gpCourseProp = ko.observableArray();
// Fix 1:
// vvvvvvvvvvvvvvvvvvvvvvv v
self.gpCourseProp.push(new gpCourseProperties("MATH1030",true));
self.gpCourseProp.push(new gpCourseProperties("MATH1006",true));
self.gpCourseProp.push(new gpCourseProperties("MATH1046",true));
for (i = 0; i < self.gpCourseProp().length; i++) {
// Fix 2:
// vv
if (self.gpCourseProp()[i].gpCode() == "MATH1030") {
self.gpCourseProp()[i].addCourse("1","MATH1030","Calculus","City1");
self.gpCourseProp()[i].addCourse("2","City2");
self.gpCourseProp()[i].addCourse("3","City3");
}
if (self.gpCourseProp()[i].gpCode() == "MATH1006") {
self.gpCourseProp()[i].addCourse("4","MATH1006","Linear algebra","City1");
self.gpCourseProp()[i].addCourse("6","City2");
}
if (self.gpCourseProp()[i].gpCode() == "MATH1046") {
self.gpCourseProp()[i].addCourse("5","MATH1046","Discrete Math","City1");
self.gpCourseProp()[i].addCourse("7","City2");
}
}
}
var vm = new ViewModel();
ko.applyBindings(vm);