Empty lists now display placeholders when empty. closes #502

openid-connect-server-webapp/src/main/webapp/resources/js/admin.js

@@ -75,8 +75,6 @@ var ListWidgetChildView = Backbone.View.extend({
             this.template = _.template($('#tmpl-list-widget-child').html());
         }
 
-        this.model.bind('destroy', this.remove, this);
-
     },
 
     render:function () {
@@ -115,7 +113,7 @@ var ListWidgetView = Backbone.View.extend({
 
         this.$el.addClass("table table-condensed table-hover table-striped span4");
         this.collection.bind('add', this.render, this);
-
+        this.collection.bind('remove', this.render, this);
     },
 
     addItem:function(e) {
@@ -156,10 +154,14 @@ var ListWidgetView = Backbone.View.extend({
 
         _self = this;
 
-        _.each(this.collection.models, function (model) {
-            var el = new this.childView({model:model}).render().el;
-            $("tbody", _self.el).append(el);
-        }, this);
+        if (_.size(this.collection.models) == 0) {
+    		$("tbody", _self.el).html($('#tmpl-list-widget-child-empty').html());
+        } else {
+        	_.each(this.collection.models, function (model) {
+        		var el = new this.childView({model:model}).render().el;
+        		$("tbody", _self.el).append(el);
+        	}, this);
+        }
 
         return this;
     }

openid-connect-server-webapp/src/main/webapp/resources/template/admin.html

@@ -29,7 +29,13 @@
 
 <script type="text/html" id="tmpl-list-widget-child">
     <td><%=(item.length > 30) ? item.substr(0,27) + '...' : item %></td>
-    <td><a class="btn btn-small btn-delete" href="#"><i class="icon-minus-sign"></i></a></td>
+   	<td><a class="btn btn-small btn-delete" href="#"><i class="icon-minus-sign"></i></a></td>
+</script>
+
+<script type="text/html" id="tmpl-list-widget-child-empty">
+	<tr class="info">
+		<td colspan="2">There are no items in this list.</td>
+	</tr>
 </script>
 
 <script type="text/html" id="tmpl-list-widget">