Question

I am new to backbone and I am stuck with a problem

problem in short

I have two lists to be shown.

1.Courses

2.Students for selected course

which I am able to show now.

Now in the StudentList view(it uses “Students” collection) I have an add button,which adds the student for the selected course item(which is in separate view). For that I need to know which course item I have clicked inside the StudentList view. For that I have stored the courseId in a hidden field when a course is clicked and later in StudentList view I have fetched that hidden field value to add the new student.

What I want to do is instead of storing the courseId in a hidden field,can I add the courseId to the “Students” collection as an attribute when a course is clicked.

Tried Approach

Inside StudentList view I have written something like this

var StudentList = Backbone.View.extend({
 initialize: function () {
    this._meta = {};       
},  

put: function (prop, value) {
    this._meta[prop] = value;
},
get: function (prop) {
    return this._meta[prop];
},   
events: {
    "click    #btnAddStudent": "createNewStudent"
},

createNewStudent: function () {      
    var some =  this.get("someProp");       
    this.collection.create({ Name: this.$el.find('#txtNewStudent').val(), 
    CourseId: some  });       
}
});

And in “courseClicked” function I have done like this(the “courseClicked” function is inside the CourseItem view)

var CourseItem = Backbone.View.extend({  
events: {        
    'click': 'courseClicked'
},
initialize: function () {
    this.students = this.options.students;
},  
courseClicked: function () {
    var courseId = this.model.id;
    this.students.put('someProp',courseId);
    this.students.fetch({ data: { courseId: courseId} });
}   
});

The above doesn’t work because put and get functions are not available in the courseitem view context,they are defined in StudentList view.Can anyone guide me how to accomplish my needs.

This question is continuation to the one I posted earlier on SO here
Using Event Aggregator to load a view with different model in backbone js
This link might help to know further details of my question.

Thanks for your patience

Answer 1

this should be a partial answer which might lead you to right way or into the trenches. Here it goes.

1. It is best that you have 2 views one for Students list and one for course list. Providing a checkbox list should be good for the course list as Students -> Course is one to many relationship.

2. Course(model) should have a selected attribute(only on client, no significance to server side) which you toggle during checkbox click. Courses (collection) should redraw the changed course with highlights etc

3. The Courses(Collection) should be accessible through window object. something like window.App.Students.Courses where Courses is an instance of Courses collection.
   ex:window.App.Students.Courses = new window.App.Students.Collection.Courses;

4. Now when the course is selected and students are selected. You have global access to courses that have been selected ( which can be retrieved using underscore.js methods) then set the course id into a array for the selected students. something like for each selectedstudent ( foreach selectedCourse selectedStudent.course.push(selectedCourse)). json for student will then look like below

{
id: 1,
name: "Jack Keane",
courses: [1, 2, 5, 6, 7]
}

Code

Inside the Student view, do the following to get the selected courses for the student.

window.courses.filter(function(course){
  return course.get("selected");
});

use the filter method for obtaining the selected courses. Then assign the course to the student as in #4.

var selectedCourses =     window.courses.filter(function(course){
      return course.get("selected");
    });

this.collection.forEach(function(student){

student.set("courses") = selectedCourses;

});

by doing the above, every student now has courses attribute that gives you the selected courses for this student.