listing folders in ui works

src/js/app-controller.js

@@ -20,8 +20,9 @@ define(function(require) {
 	 */
 	self.start = function(callback) {
 		// the views to load
-		var views = ['login', 'compose', 'folderlist', 'messagelist',
-			'messagelistitem', 'read'
+		var views = [
+			'login', 'compose', 'folderlist', 'folderlistitem',
+			'messagelist', 'messagelistitem', 'read'
 		];
 
 		// are we running in native app or in browser?

src/js/view/folderlist-view.js

@@ -1,4 +1,6 @@
-define(['jquery', 'underscore', 'backbone', 'js/app-config'], function($, _, Backbone, app) {
+define(['jquery', 'underscore', 'backbone', 'js/app-config',
+	'js/view/folderlistitem-view'
+], function($, _, Backbone, app, FolderListItemView) {
 	'use strict';
 
 	var FolderListView = Backbone.View.extend({
@@ -23,7 +25,10 @@ define(['jquery', 'underscore', 'backbone', 'js/app-config'], function($, _, Bac
 		},
 
 		listFolder: function() {
-			// var page = $(this.el);
+			var self = this,
+				page = $(this.el),
+				list = page.find('#folder-list'),
+				listItemArgs;
 
 			// show loading msg during init
 			$.mobile.loading('show', {
@@ -36,13 +41,27 @@ define(['jquery', 'underscore', 'backbone', 'js/app-config'], function($, _, Bac
 			app.util.postMessage('listFolders', {}, function(resArgs) {
 				var err = resArgs.err;
 
-				$.mobile.loading('hide');
-				if (err) {
-					window.alert(err.errMsg);
+				if (err || !resArgs.folders) {
+					$.mobile.loading('hide');
+					window.alert('Error listing folders: ' + err.errMsg);
 					return;
 				}
 
-				console.log(resArgs);
+				// clear list
+				list.html('');
+
+				// append folder to list
+				resArgs.folders.forEach(function(folder) {
+					listItemArgs = {
+						account: self.options.account,
+						model: folder
+					};
+					list.append(new FolderListItemView(listItemArgs).render().el);
+				});
+
+				// refresh list view
+				list.listview('refresh');
+				$.mobile.loading('hide');
 			});
 		}
 	});

src/js/view/folderlistitem-view.js

@@ -0,0 +1,22 @@
+define(['jquery', 'underscore', 'backbone', 'js/app-config'], function($, _, Backbone, app) {
+	'use strict';
+
+	var FolderListItemView = Backbone.View.extend({
+
+		tagName: "li",
+
+		initialize: function() {
+			this.template = _.template(app.util.tpl.get('folderlistitem'));
+		},
+
+		render: function() {
+			var params = this.model;
+			params.account = this.options.account;
+
+			$(this.el).html(this.template(params));
+			return this;
+		}
+	});
+
+	return FolderListItemView;
+});

src/tpl/folderlist.html

@@ -4,33 +4,7 @@
 </div><!-- /header -->
 
 <div data-role="content">
-  <ul data-role="listview">
-    <li><a href="#accounts/<%- account %>/folders/inbox">
-      <img src="css/icons/glyphicons_130_inbox.png" class="ui-li-icon ui-corner-none">
-      Inbox
-      <!--<span class="ui-li-count">12</span>-->
-    </a></li>
-    <li><a href="#accounts/<%- account %>/folders/outbox">
-      <img src="css/icons/glyphicons_135_inbox_out.png" class="ui-li-icon ui-corner-none">
-      Outbox
-      <!--<span class="ui-li-count">0</span>-->
-    </a></li>
-    <li><a href="#accounts/<%- account %>/folders/drafts">
-      <img src="css/icons/glyphicons_030_pencil.png" class="ui-li-icon ui-corner-none">
-      Drafts
-      <!--<span class="ui-li-count">4</span>-->
-    </a></li>
-    <li><a href="#accounts/<%- account %>/folders/sent">
-      <img src="css/icons/glyphicons_010_envelope.png" class="ui-li-icon ui-corner-none">
-      Sent
-      <!--<span class="ui-li-count">328</span>-->
-    </a></li>
-    <li><a href="#accounts/<%- account %>/folders/trash">
-      <img src="css/icons/glyphicons_016_bin.png" class="ui-li-icon ui-corner-none">
-      Trash
-      <!--<span class="ui-li-count">62</span>-->
-    </a></li>
-  </ul>
+  <ul id="folder-list" data-role="listview"></ul>
 </div><!-- /content -->
 
 <div data-role="footer" data-position="fixed">

src/tpl/folderlistitem.html

@@ -0,0 +1,5 @@
+<a href="#accounts/<%- account %>/folders/<%- name %>">
+  <img src="css/icons/glyphicons_130_inbox.png" class="ui-li-icon ui-corner-none">
+  <%- name %>
+  <!--<span class="ui-li-count">12</span>-->
+</a>