Refactoring breadcrumbs. The breadcrumb bar will disappear momentarily.

openid-connect-server/src/main/webapp/WEB-INF/tags/breadcrumbs.tag

@@ -1,5 +1,2 @@
 <%@attribute name="crumb" required="false" %>
-<ul class="breadcrumb">
+<div id="breadcrumbs"></div>
-    <li><a href="#">Home</a> <span class="divider">/</span></li>
-    <li class="active">${crumb}</li>
-</ul>

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

@@ -90,6 +90,27 @@
         url:"api/clients"
     });
 
+    var BreadCrumbView = Backbone.View.extend({
+
+        tagName: 'ul',
+
+        initialize:function () {
+
+            if (!this.template) {
+                this.template = _.template($('#tmpl-breadcrumbs').html());
+            }
+
+            this.$el.addClass('breadcrumb');
+
+            this.model.bind('change', this.render, this);
+        },
+
+        render:function (eventName) {
+            this.$el.html(this.template(this.model.toJSON()));
+            $('#breadcrumbs').html(this.el);
+        }
+    });
+
 
     var ClientView = Backbone.View.extend({
 
@@ -374,6 +395,8 @@
             this.whiteListView = new URLListView();
             this.blackListView = new URLListView();
 
+            //this.clientBreadCrumbView = new BreadCrumbView();
+
             this.startAfter([this.clientList]);
 
         },

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

@@ -42,9 +42,15 @@
 
     <h1><%=(clientId == null ? 'New' : 'Edit')%> Client</h1>
 
+
     <form class="form-horizontal">
         <fieldset>
             <legend>Details</legend>
+
+            <div class="well">
+                <button class="btn btn-small btn-primary">Submit</button>
+            </div>
+
             <div class="control-group" id="applicationName">
                 <label class="control-label">Application name</label>
                 <div class="controls">
@@ -200,14 +206,18 @@
                 </div>
             </div>
 
+            <div class="well">
+                <button class="btn btn-small btn-primary">Submit</button>
+            </div>
+
         </fieldset>
     </form>
 
+</script>
 
-
+<script type="text/html" id="tmpl-breadcrumbs">
-
+    <% for (var i = 0; i < crumbs.length; ++i) { %>
-    <div class="well">
+    <li><a href="<%=crumbs[i].href%>"><%=crumbs[i].text%></a> <span class="divider">/</span></li>
-        <button class="btn btn-small btn-primary">Submit</button>
+    <% }%>
-    </div>
+    <li class="active">active crumb</li>
-
 </script>