intial layin of lesson menu

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

@@ -1,14 +1,30 @@
 define(['jquery',
 	'underscore',
-	'backbone'], function($,_,Backbone) {
+	'backbone',
+	'goatApp/support/GoatUtils',
+	'goatApp/view/MenuItemView'],
+	function(
+		$,
+		_,
+		Backbone,
+		GoatUtils,
+		MenuItemView) {
 
 	return Backbone.View.extend({
 		initialize: function(options) {
 			options = options || {};
-
+			this.items = options.items;
+		},
+		render: function() {
+			var viewItems = [];
+			for (var i=0;i<this.items.length;i++) {
+				var listItem = $('<li>',{text:this.items[i].name});
+				//viewItems
+				viewItems.push(listItem);
+			}
+			return viewItems;
 		}
 
-
 	});
 
 });

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

@@ -0,0 +1,37 @@
+// define(['jquery',
+// 	'underscore',
+// 	'backbone',
+// 	'goatApp/model/MenuItemModel',
+// 	'goatApp/model/MenuItemCollection'],
+// 	function($,_,Backbone,MenuItemModel,MenuItemCollection) {
+
+// 	return Backbone.View.extend({
+// 		initialize: function(options) {
+// 			options = options || {};
+// 			//if children, generate Stage views
+// 			this.collection = new MenuItemCollection();
+// 			this.collection.set(options.collection);
+// 		},
+// 		render: function() {
+// 			//example
+// 			/*
+// 			"name": "Using an Access Control Matrix",
+// 			"type": "LESSON",
+// 			"children": [ ],
+// 			"complete": false,
+// 			"link": "#attack/18/200",
+// 			"showSource": true,
+// 			"showHints": true
+// 			*/
+// 			var link = $('<a>',{});
+// 			var listItem = $('<li>',{class:'sub-menu',text:this.model.get('name')});
+
+// 			listItem.append(link);
+// 				//this.model.get('name') + this.model.get('children').length + '</li>';
+// 			return listItem;
+// 		}
+
+
+// 	});
+
+// });

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

@@ -0,0 +1,14 @@
+define(['jquery',
+	'underscore',
+	'backbone'], function($,_,Backbone) {
+
+	return Backbone.View.extend({
+		initialize: function(options) {
+			options = options || {};
+
+		}
+
+
+	});
+
+});

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

@@ -1,57 +1,37 @@
 define(['jquery',
 	'underscore',
 	'backbone',
-	'goatApp/model/MenuItemCollection'], 
-	function($,_,Backbone,MenuItemCollection) {
+	'goatApp/model/MenuCollection',
+	'goatApp/view/MenuItemView'], 
+	function($,_,Backbone,MenuCollection,MenuItemView) {
 
 	return  Backbone.View.extend({
 		el:'#menuContainer',
 		//TODO: set template
 		initialize: function() {
-			this.collection = new MenuItemCollection();
+			this.collection = new MenuCollection();
 			this.listenTo(this.collection,'menuData:loaded',this.render);
 		},
+		// rendering top level menu
 		render: function (model){
-			//TODO: implement own HTML Encoder
-			this.$el.html('render ' + this.collection.length + ' items');//buildMenu(items)
-		},
-		buildMenu: function(items) {
-
-			var menuData = new MenuData();
-
-			var i, j, k, $wholeMenu, $menuCat, itemClass, $lessonItem, lessons, stages, $stageItem;
-			var _renderMenu = function (items) {
-				$wholeMenu = $('<ul>');
-				for (var i=0;i<items.length;i++){
-					// should be at category level ...
-					itemClass = (items[i].class || '');
-					if (items[i].type && items.type === 'CATEGORY') {
-						itemClass += 'fa-angle-right pull-right';
-					}
-					var $menuCat = $('<li>',{text:items[i].name,class:itemClass});
-					$wholeMenu.append($menuCat);
-					var lessonList = $('<ul>',{class:'slideDown lessonsAndStages' + items[0].displayClass,id:items[0].id}) //
-					// first tier lessons
-					var lessons = items[i].children;
-					for (j=0;j<lessons.length;j++) {
-						itemClass = (lessons[j].class || '');
-						$lessonItem = $('<li>',{text:lessons[j].name,id:lessons[j].id});//add click
-						lessonList.append($lessonItem);
-						//stages (children of lesson)
-						stages = lessons[j].children;
-						for (k=0;k<stages.length;k++) {
-							$stageItem = $('<li>',{text:stages[k].name,id:stages[k].id});
-							lessonList.append($stageItem);
-						}
-					}
-					$menuCat.append(lessonList);
+			var items = this.collection.models; // top level items
+			var menuMarkup = '';
+			var menuUl = $('<ul>',{class:'nano-content'});
+			for(var i=0;i<items.length;i++) {
+				var category = $('<li>',{class:'sub-menu'});
+				var catLink = $('<a>',{text:items[i].get('name')});
+				category.append(catLink);
+				// lesson level (first children level)
+				var categoryLessonList = $('<ul>',{class:'slideDown lessonsAndStages'});
+				var catItems = new MenuItemView({items:items[i].get('children')}).render();
+				for (var j=0;j< catItems.length;j++) {
+					categoryLessonList.append(catItems[j]);
 				}
-				return $wholeMenu;
-				//$wholeMenu.append($menuCat);
-				$(goatConstants.getDOMContainers().lessonMenu).html('').append($wholeMenu);
-			};
-			
-		},
+				category.append(categoryLessonList);
+				menuUl.append(category);
+			}
+			this.$el.append(menuUl);
 
+		}
 	});
 });