淘汰赛 - 访问嵌套 属性 的问题
knockout - issue with accessing a nested property
我正在尝试通过研究现有的源代码并对它们进行小的更改来学习 knockoutjs。我在这里尝试理解的源代码是 RP Niemeyer 的 knockout-sortable.js 示例。
原示例代码为here
我做了一些小改动 here
原始代码有一个名为 maximumstudents 的全局 属性,它检查每个 table 中的学生人数。我在 table 中添加了一个名为“maxstudents”的 属性,它将决定每个 table.
中可以坐多少学生
此外,原始代码使每个 table 都充满了男女学生。我想看看是否可以根据性别隔离一些 table。
为此..我还添加了另一个属性“allowedstudentgender”,它将决定哪种性别的学生可以坐在哪个table..
这段代码的变化如下所示..
var Table = function(id, name, students,maxstudents,allowedstudentgender) {
this.students = ko.observableArray(students);
this.students.id = id;
this.name = ko.observable(name);
this.maxstudents=ko.observable(maxstudents);
this.allowedstudentgender=ko.observableArray(allowedstudentgender);
};
并且数据连续变化:
var initialTables = [
new Table(1,"Table One", [
new Student(3, "Jim", "male"),
new Student(6, "Chase", "male")
],2,["male"]),
//and so on...
原来决定每个table学生人数的方法如下..
this.isTableFull = function(parent) {
return parent().length < self.maximumStudents;
};
我想弄清楚的是如何在这个方法中获得 table 的 maxstudents 属性..
此外..要根据性别隔离用户,我需要更改 -verifyAssignments 方法..
当前功能由以下代码检查..
if (!ko.utils.arrayFirst(parent(), function(student) { return student.gender !== gender;})){// .... }
这里我需要弄清楚如何让学生性别映射到tables' allowedstudentgender 属性..
我试图通过检查 'arg.targetParent.allowedstudentgender' 来获取 allowedstudentgender 属性 但它显示未定义
真诚感谢任何帮助..
谢谢
由于 arg.targetParent
当放置学生时实际上是学生数组而不是包含它的 table,您可以将所有内容移动到它下面:
var Table = function(id, name, students,maxstudents,allowedstudentgender) {
this.students = ko.observableArray(students);
this.students.id = id;
this.name = ko.observable(name);
this.students.maxstudents=ko.observable(maxstudents);
this.students.allowedstudentgender=ko.observableArray(allowedstudentgender);
};
然后调整对新位置的任何引用并修改新规则的处理程序:
this.verifyAssignments = function(arg) {
var parent = arg.targetParent;
if (parent.id !== "Available Students" && parent.allowedstudentgender().length === 1 && arg.item.gender != parent.allowedstudentgender()[0]) {
self.lastError("Cannot move " + arg.item.name() + " to " + arg.targetParent.id + " because the table is unigender.");
arg.cancelDrop = true;
}
};
我正在尝试通过研究现有的源代码并对它们进行小的更改来学习 knockoutjs。我在这里尝试理解的源代码是 RP Niemeyer 的 knockout-sortable.js 示例。
原示例代码为here
我做了一些小改动 here
原始代码有一个名为 maximumstudents 的全局 属性,它检查每个 table 中的学生人数。我在 table 中添加了一个名为“maxstudents”的 属性,它将决定每个 table.
中可以坐多少学生此外,原始代码使每个 table 都充满了男女学生。我想看看是否可以根据性别隔离一些 table。 为此..我还添加了另一个属性“allowedstudentgender”,它将决定哪种性别的学生可以坐在哪个table..
这段代码的变化如下所示..
var Table = function(id, name, students,maxstudents,allowedstudentgender) {
this.students = ko.observableArray(students);
this.students.id = id;
this.name = ko.observable(name);
this.maxstudents=ko.observable(maxstudents);
this.allowedstudentgender=ko.observableArray(allowedstudentgender);
};
并且数据连续变化:
var initialTables = [
new Table(1,"Table One", [
new Student(3, "Jim", "male"),
new Student(6, "Chase", "male")
],2,["male"]),
//and so on...
原来决定每个table学生人数的方法如下..
this.isTableFull = function(parent) {
return parent().length < self.maximumStudents;
};
我想弄清楚的是如何在这个方法中获得 table 的 maxstudents 属性..
此外..要根据性别隔离用户,我需要更改 -verifyAssignments 方法..
当前功能由以下代码检查..
if (!ko.utils.arrayFirst(parent(), function(student) { return student.gender !== gender;})){// .... }
这里我需要弄清楚如何让学生性别映射到tables' allowedstudentgender 属性..
我试图通过检查 'arg.targetParent.allowedstudentgender' 来获取 allowedstudentgender 属性 但它显示未定义
真诚感谢任何帮助..
谢谢
由于 arg.targetParent
当放置学生时实际上是学生数组而不是包含它的 table,您可以将所有内容移动到它下面:
var Table = function(id, name, students,maxstudents,allowedstudentgender) {
this.students = ko.observableArray(students);
this.students.id = id;
this.name = ko.observable(name);
this.students.maxstudents=ko.observable(maxstudents);
this.students.allowedstudentgender=ko.observableArray(allowedstudentgender);
};
然后调整对新位置的任何引用并修改新规则的处理程序:
this.verifyAssignments = function(arg) {
var parent = arg.targetParent;
if (parent.id !== "Available Students" && parent.allowedstudentgender().length === 1 && arg.item.gender != parent.allowedstudentgender()[0]) {
self.lastError("Cannot move " + arg.item.name() + " to " + arg.targetParent.id + " because the table is unigender.");
arg.cancelDrop = true;
}
};