wiring backbone views

DefaultRouter.js

//Store this file at CarePassMe/Controllers/DefaultRouter.js

define(['backbone', '../Collections/Course', '../Views/CourseList', '../Collections/Page', '../Views/Pages'], 
function (Backbone, Course, CourseList, Page, Pages) {

//The default router for the application.
//If you wanted to keep the globals for use outside of requirejs modules,
//note the assignment as part of the return. Otherwise, if the globals
are not needed just return Backbone.Router.extend()...
return CarePassMe.Controllers.DefaultRouter = Backbone.Router.extend({
   
    routes:{
        "":"index",
        "course":"courseList",
        "course/:id": "course"
    },
    initialize:function()
    {
    	_.bindAll(this,"index","courseList","course","setActiveScreen");
    	
    	//Binding the json data
       this.courseCollection = new Course([                                                            
       { 
    	 id: 1, 
    	 name: "Course 1", 
    	 description: "Location to Boston, Mass", 
    	 distance:26.2, 
    	 images: [
    	   	         	{ 	url: encodeURIComponent("http://icons.iconseeker.com/png/fullsize/business-toolbar/location.png"), 
    	   	         		primary:true 
    	   	         	}, 
    	   	         	{ 
    	   	         		url: "",
    	   	         		primary:false
    	   	         	} 
    	   	      ], 
    	  unlocked: true,
    	  waypoints: [
    	              	{ name: "waypoint" }, 
    	              	{ name: "waypoint" }
    	              ]
		}]);
        this.courseListView = new CourseList({collection:this.courseCollection});
        this.courseListView.render();
        
        var $screen = $("#course-list");
    	$screen.append(this.courseListView.$el);
        this.setActiveScreen($screen);
       
    },
    index:function()
    {
    	
    },
    //View to display the list of courses
    courseList:function()
    {
    	//Undo when router structure setup...Hemraj ask me to do it
    	
		//var $screen = $("#course-list");
		//$screen.append(this.courseListView.$el);
		//this.setActiveScreen($screen);
        
    },
    //view to display the courses information.
    course: function (id) {
        $("#course").empty();
        var model = this.courseCollection.get(id);
        // Lazy load the page collection assigning at the moment
        model.attributes.pages = new Page(
        		[{id: 1, name:"", description:"", type:"first_page", order:1,
        	        elements: [{
        	                	   id: 1, 
        	                	   type:"intro", 
        	                	   images:[{url:"É", primary:true},{url:"É"},{url:"É"}], 
        	                	   distance: "26.2 miles",
        	                	   waypoints: "Musee d'Orsay, Champs d'Elysee É",
        	                	   averageTime: "The average Parisian walks..."
        	                   }]
        		}]);
        
        this.pages = new Pages({ model: model , el:$("body")});
        this.pages.render();
        var $screen = $("#page-list");
        this.setActiveScreen($screen);
    },
    //Set the active view
    setActiveScreen: function ($screen) {
        $('.screen.active').removeClass('active');
        $screen.addClass('active');
    }
	 
});

});