knockout - issue with accessing a nested property

Question

I'm trying to learn knockoutjs by studying existing sourcecodes and making small changes to them.. The source code that I'm trying to understand here is an example of knockout-sortable.js by RP Niemeyer.

The original example code is here

I have made some small changes which are here

The original code has a global property called maximumstudents which checked the number of students in each table. I have added a property in table called "maxstudents" which will decide how many students can sit in each table.

Also the original code enables each table is filled with students of both genders. I'm trying to see if its possible to segregate some tables based on gender. To do this..I have also added another property "allowedstudentgender" which will decide students of which gender can sit in which table..

The changes in this code is shown below..

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

And consecutive changes in the data:

 var initialTables = [
    new Table(1,"Table One",  [
       new Student(3, "Jim", "male"),
         new Student(6, "Chase", "male")
    ],2,["male"]),
    //and so on...

The original method which decides the number of students in each table is as below..

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

What I'm trying to figure out is how to get the maxstudents property of the table in this method..

Also.. To segregate users based on Gender, I need to change -verifyAssignments method..

The current functionality is checked by the following codepiece..

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

Here I need to figure out how to get students gender mapped to tables' allowedstudentgender property..

I tried to get the allowedstudentgender property by checking for 'arg.targetParent.allowedstudentgender' but it shows undefined

Any help is sincerely appreciated..

Thanks

Answer 1

Since arg.targetParent when placing a student is really the students array rather than the table that contains it, you can just move everything under it:

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

then adjust any references to the new location and modify the handler for your new rules:

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)