TitleView implemented. Need to add way to handle on route, not just click.

src/main/webapp/WEB-INF/pages/main_new.jsp

@@ -54,8 +54,8 @@
                         <i class="fa fa-bars"></i>
                     </button>
                 </div><!--toggle navigation end-->
-                <div class="lessonTitle" >
-                    <h1 id="lessonTitle"></h1>
+                <div id="lessonTitleWrapper" >
+                    <h1 class="lessonTitle"></h1>
                 </div><!--lesson title end-->
                 <div class="user-nav pull-right" style="margin-right: 75px;">
                     <div class="dropdown" style="display:inline">

src/main/webapp/js/goatApp/controller/LessonController.js

@@ -32,6 +32,7 @@ define(['jquery',
 				//this.lessonView  = new LessonContentView({content:LessonContent.content});
 				this.lessonView.model = this.lessonContent;
 				this.lessonView.render();
+
 				//load cookies/parameters view
 
 				//load title view (initially hidden)
@@ -43,6 +44,7 @@ define(['jquery',
 				//source (initially hidden)
 
 				//load help controls view (contextul to what helps are available)
+
 			}
 			
 		};

src/main/webapp/js/goatApp/controller/MenuController.js

@@ -1,14 +1,22 @@
 define(['jquery','underscore','backbone','goatApp/view/MenuView'], 
 	function($,_,Backbone,MenuView) {
 		 Controller = function(options){
+		 	_.extend(Controller.prototype,Backbone.Events);
 			options = options || {};
 			this.menuView = options.menuView;
+			this.titleView = options.titleView;
+
 		 	this.initMenu = function() {
-		 		console.debug('initing menu');
+		 		this.listenTo(this.menuView,'lesson:click',this.renderTitle);
 		 	}
 
 		 	this.updateMenu = function() {
 		 		
+		 	},
+
+		 	//TODO: move title rendering into lessonContent/View pipeline once data can support it
+		 	this.renderTitle = function(title) {
+		 		this.titleView.render(title);
 		 	}
 
 		 };

src/main/webapp/js/goatApp/view/GoatRouter.js

@@ -4,11 +4,14 @@ define(['jquery',
 	'goatApp/controller/LessonController',
 	'goatApp/controller/MenuController',
 	'goatApp/view/LessonContentView',
-	'goatApp/view/MenuView'
-	], function ($,_,Backbone,LessonController,MenuController,LessonContentView,MenuView) {
+	'goatApp/view/MenuView',
+	'goatApp/view/TitleView'
+	], function ($,_,Backbone,LessonController,MenuController,LessonContentView,MenuView,TitleView) {
 
 		var lessonView = new LessonContentView();
 		var menuView = new MenuView(); 
+		var titleView = new TitleView();
+
 		var GoatAppRouter = Backbone.Router.extend({
 			routes: {
 				//#....
@@ -19,7 +22,8 @@ define(['jquery',
 				lessonView:lessonView
 			}),
 			menuController: new MenuController({
-				menuView:menuView
+				menuView:menuView,
+				titleView:titleView
 			}),
 
 			init:function() {

src/main/webapp/js/goatApp/view/MenuView.js

@@ -28,7 +28,7 @@ define(['jquery',
 			var menuMarkup = '';
 			var menuUl = $('<ul>',{class:'nano-content'});
 			for(var i=0;i<items.length;i++) { //CATEGORY LEVEL
-				var catId, category, catLink, catArrow, catLinkText;
+				var catId, category, catLink, catArrow, catLinkText, lessonName, stageName;
 				catId = GoatUtils.makeId(items[i].get('name'));
 				category = $('<li>',{class:'sub-menu ng-scope'});
 				catLink = $('<a>',{'category':catId});
@@ -40,7 +40,6 @@ define(['jquery',
 				//TODO: refactor this along with sub-views/components
 				var self = this;
 				catLink.click(_.bind(this.expandCategory,this,catId));
-				//TODO: bind catLink to accordion and selection method
 				category.append(catLink);
 				// lesson level (first children level)
 				//var lessons = new MenuItemView({items:items[i].get('children')}).render();
@@ -49,14 +48,17 @@ define(['jquery',
 					var categoryLessonList = $('<ul>',{class:'slideDown lessonsAndStages',id:catId}); //keepOpen
 					for (var j=0; j < lessons.length;j++) {
 						var lessonItem = $('<li>');
-						var lessonLink = $('<a>',{href:lessons[j].link,text:lessons[j].name,id:GoatUtils.makeId(lessons[j].name)});
+						lessonName = lessons[j].name;
+						var lessonLink = $('<a>',{href:lessons[j].link,text:lessonName,id:lessonName});
+						lessonLink.click(_.bind(this.triggerTitleRender,this,lessonName));
 						lessonItem.append(lessonLink);
 						//check for lab/stages
 						categoryLessonList.append(lessonItem);
 						var stages = lessons[j].children;
 						for (k=0; k < stages.length; k++) {
+							var stageName = stages[k].name;
 							var stageSpan = $('<span>');
-							var stageLink = $('<a>',{href:stages[k].link,text:stages[k].name,id:GoatUtils.makeId(stages[k].name)});
+							var stageLink = $('<a>',{href:stages[k].link,text:stageName,id:GoatUtils.makeId(stageName)});
 							stageSpan.append(stageLink);
 							categoryLessonList.append(stageSpan);
 						}
@@ -64,7 +66,6 @@ define(['jquery',
 					category.append(categoryLessonList);
 				}
 
-				
 				menuUl.append(category);
 			}
 			this.$el.append(menuUl);
@@ -73,6 +74,10 @@ define(['jquery',
 				this.accordionMenu(this.openMenu);
 			}
 		},
+		triggerTitleRender: function (title) {
+			console.debug('title:'+title);
+			this.trigger('lesson:click',title);
+		},
 		expandCategory: function (id) {
 			if (id) {
 				this.accordionMenu(id);

src/main/webapp/js/goatApp/view/TitleView.js

@@ -0,0 +1,11 @@
+define(['jquery',
+	'underscore',
+	'backbone'],
+function($,_,Backbone) {
+	return Backbone.View.extend({
+		el:'#lessonTitleWrapper',
+		render:function(title) {
+			this.$el.find('.lessonTitle').html(title);
+		}
+	});
+});