knockout - 访问嵌套属性的问题

时间:2015-03-29 11:06:05

标签: knockout.js knockout-2.0 knockout-sortable

我试图通过研究现有的源代码并对它们进行小的改动来学习knockoutjs。我在这里试图理解的源代码是RP Niemeyer的knockout-sortable.js的一个例子。

原始示例代码为here

我做了一些小变化here

原始代码有一个名为maximumstudents的全局属性,用于检查每个表中的学生数。我在表格中添加了一个名为" maxstudents"这将决定每个学生可以坐多少学生。

此外,原始代码使每个表都充满了两种性别的学生。我试图看看是否有可能根据性别划分一些表格。 要做到这一点......我还添加了另一个属性" allowedstudentgender"这将决定哪些性别可以坐在哪个表中的学生..

此代码中的更改如下所示。

    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...

决定每个表中学生人数的原始方法如下。

 this.isTableFull = function(parent) {
            return parent().length < self.maximumStudents;
        };

我想弄清楚的是如何在此方法中获取表格的maxstudents属性

另外..要根据性别隔离用户,我需要更改-verifyAssignments方法..

以下代码检查当前功能..

if (!ko.utils.arrayFirst(parent(), function(student) { return student.gender !== gender;})){// .... }

在这里,我需要找出如何让学生将性别映射到表格&#39;允许学生的财产 ..

我试图通过检查&#39; arg.targetParent.allowedstudentgender&#39;来获取allowedstudentgender属性。但它显示未定义的

真心感谢任何帮助。

由于

1 个答案:

答案 0 :(得分:1)

由于放置学生时arg.targetParent实际上是学生数组而不是包含它的表格,因此您可以移动其下的所有内容:

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;
    }

};

(jsfiddle)