Backbone List View Widget Initial Commit

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

@@ -13,6 +13,85 @@
 
     });
 
+
+    var ListWidgetView = Backbone.View.extend({
+
+        tagName: "table",
+
+        childView: Backbone.View.extend({
+
+            tagName: 'tr',
+
+            events:{
+                "click .icon-minus-sign":function () {
+                    this.$el.tooltip('destroy');
+                    this.model.destroy();
+                }
+            },
+
+            initialize:function () {
+
+                if (!this.template) {
+                    this.template = _.template($('#tmpl-list-widget-child').html());
+                }
+
+                this.model.bind('destroy', this.remove, this);
+
+            },
+
+            render:function () {
+                this.$el.html(this.template(this.model.toJSON()));
+
+                if (this.model.get('uri').length > 27)
+                    this.$el.tooltip({title:this.model.get('uri')});
+
+                return this;
+            }
+        }),
+
+        events:{
+            "click button": "addItem"
+        },
+
+        initialize:function () {
+
+            if (!this.template) {
+                this.template = _.template($('#tmpl-list-widget').html());
+            }
+
+            this.$el.addClass("table-condensed");
+            this.collection.bind('add', this.render, this);
+
+        },
+
+        addItem:function() {
+            var input_value = $("input", this.el).val().trim();
+
+            var uri = new URIModel({uri:input_value});
+
+            // if it's valid and doesn't already exist
+            if (uri.isValid() && this.collection.where({uri: input_value}).length < 1) {
+                this.collection.add(uri);
+            }
+        },
+
+        render:function (eventName) {
+
+            this.$el.html(this.template());
+
+            _self = this;
+
+            _.each(this.collection.models, function (model) {
+                var el = new this.childView({model:model}).render().el;
+                $("tbody", _self.el).append(el);
+            }, this);
+
+            return this;
+        }
+
+    });
+
+
     var ClientModel = Backbone.Model.extend({
 
         idAttribute: "id",
@@ -89,77 +168,6 @@
 
 
 
-    var URIView = Backbone.View.extend({
-
-        tagName: 'tr',
-
-        events:{
-            "click .icon-minus-sign":function() { this.model.destroy(); }
-        },
-
-        initialize:function () {
-
-            if (!this.template) {
-                this.template = _.template($('#tmpl-uri').html());
-            }
-
-            this.model.bind('destroy', this.remove, this);
-
-        },
-
-        render:function () {
-            this.$el.html(this.template(this.model.toJSON()));
-            return this;
-        }
-    });
-
-    var URIListView = Backbone.View.extend({
-
-        tagName: "table",
-
-        events:{
-            "click button": "addItem"
-        },
-
-        initialize:function () {
-
-            if (!this.template) {
-                this.template = _.template($('#tmpl-uri-list').html());
-            }
-
-            this.$el.addClass("table-condensed");
-            this.collection.bind('add', this.render, this);
-
-        },
-
-        addItem:function() {
-            var input_value = $("input", this.el).val().trim();
-
-            var uri = new URIModel({uri:input_value});
-
-            // if it's valid and doesn't already exist
-            if (uri.isValid() && this.collection.where({uri: input_value}).length < 1) {
-                this.collection.add(uri);
-            }
-        },
-
-        render:function (eventName) {
-
-            this.$el.html(this.template());
-
-            _self = this;
-
-            _.each(this.collection.models, function (model) {
-                var el = new URIView({model:model}).render().el;
-                $("tbody", _self.el).append(el);
-            }, this);
-
-            return this;
-        }
-
-    });
-
-
     var BreadCrumbView = Backbone.View.extend({
 
         tagName: 'ul',
@@ -422,7 +430,7 @@
                 _self.registeredRedirectUriCollection.add(new URIModel({uri:registeredRedirectUri}));
             });
 
-            $("#registeredRedirectUri .controls",this.el).html(new URIListView({collection: this.registeredRedirectUriCollection}).render().el);
+            $("#registeredRedirectUri .controls",this.el).html(new ListWidgetView({collection: this.registeredRedirectUriCollection}).render().el);
 
             return this;
         },

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

@@ -220,12 +220,12 @@
     <% } %>
 </script>
 
-<script type="text/html" id="tmpl-uri">
+<script type="text/html" id="tmpl-list-widget-child">
-    <td><%=uri%></td>
+    <td><%=(uri.length > 27) ? uri.substr(0,27) + '...' : uri %></td>
     <td><i class="icon-minus-sign icon-gray"></i></td>
 </script>
 
-<script type="text/html" id="tmpl-uri-list">
+<script type="text/html" id="tmpl-list-widget">
     <tbody>
     <tr>
         <td><input type="text" value="" placeholder="http://"></td>