Dashboard with servers

public/js/app/router.js

@@ -6,7 +6,7 @@ define(function (require) {
       Backbone        = require('backbone'),
       LayoutView      = require('app/views/layout'),
       NavigationView  = require('app/views/navigation'),
-      HomeView        = require('app/views/home'),
+      ServersView     = require('app/views/servers/list'),
       MissionsListView= require('app/views/missions/list'),
       ModsListView    = require('app/views/mods/list'),
       ServerView      = require('app/views/servers/view'),
@@ -20,7 +20,7 @@ define(function (require) {
       servers = new Servers(),
       layoutView = new LayoutView({el: $body}).render(),
       navigationView = new NavigationView({servers: servers}),
-      homeView = new HomeView({servers: servers}),
+      serversView = new ServersView({collection: servers}),
       missionsListView = new MissionsListView({collection: missions}),
       modsListView = new ModsListView({collection: mods});
 
@@ -41,8 +41,8 @@ define(function (require) {
     },
 
     home: function () {
-      layoutView.content.show(homeView);
+      layoutView.content.show(serversView);
-      homeView.delegateEvents();
+      serversView.delegateEvents();
     },
 
     missions: function () {

public/js/app/views/servers/empty.js

@@ -1,29 +1,29 @@
 define(function (require) {
-  
+
   "use strict";
-  
+
   var $                   = require('jquery'),
       _                   = require('underscore'),
       Backbone            = require('backbone'),
       Marionette          = require('marionette'),
       AddServerView       = require('app/views/servers/add'),
-      tpl                 = require('text!tpl/home.html');
+      tpl                 = require('text!tpl/servers/empty.html');
-  
+
   return Marionette.ItemView.extend({
     template: _.template(tpl),
-    
+
     events: {
       "click #add-server": "addServer"
     },
-    
+
     initialize: function (options) {
       this.servers = options.servers;
     },
-    
+
     addServer: function () {
       var view = new AddServerView({servers: this.servers});
       new Backbone.BootstrapModal({ content: view, servers: this.servers }).open()
     },
   });
-  
+
-});
+});

public/js/app/views/servers/list.js

@@ -0,0 +1,36 @@
+define(function (require) {
+
+  "use strict";
+
+  var $                   = require('jquery'),
+      _                   = require('underscore'),
+      Backbone            = require('backbone'),
+      Marionette          = require('marionette'),
+      EmptyView           = require('app/views/servers/empty'),
+      ListItemView        = require('app/views/servers/list_item'),
+      tpl                 = require('text!tpl/servers/list.html'),
+
+      template = _.template(tpl);
+
+  return Marionette.CompositeView.extend({
+    itemView: ListItemView,
+    itemViewContainer: "tbody",
+    template: template,
+
+    emptyView: EmptyView,
+
+    buildItemView: function(item, ItemViewType, itemViewOptions){
+      // build the final list of options for the item view type
+      var options = _.extend({model: item}, itemViewOptions);
+
+      if (ItemViewType == EmptyView) {
+        options = _.extend({servers: this.collection}, options);
+      }
+
+      // create the item view instance
+      var view = new ItemViewType(options);
+      // return it
+      return view;
+    },
+  });
+});

public/js/app/views/servers/list_item.js

@@ -0,0 +1,17 @@
+define(function (require) {
+
+  "use strict";
+
+  var $                   = require('jquery'),
+      _                   = require('underscore'),
+      Backbone            = require('backbone'),
+      Marionette          = require('marionette'),
+      tpl                 = require('text!tpl/servers/list_item.html'),
+
+      template = _.template(tpl);
+
+  return Marionette.ItemView.extend({
+    tagName: "tr",
+    template: template
+  });
+});

public/js/tpl/servers/list.html

@@ -0,0 +1,10 @@
+<table class="table table-striped">
+  <thead>
+    <tr>
+      <th>Server</th>
+    </tr>
+  </thead>
+
+  <!-- want to insert collection items, here -->
+  <tbody></tbody>
+</table>

public/js/tpl/servers/list_item.html

@@ -0,0 +1,3 @@
+<td>
+  <a href='#servers/<%-id%>'><%-title%></a>
+</td>