Client table now fully rendered client-side with JS templates.

pull/59/head
Michael Jett 2012-05-07 14:39:32 -04:00
parent e9954f4439
commit 4c503a7f40
3 changed files with 83 additions and 67 deletions

View File

@ -13,31 +13,7 @@
<div class="content"> <div class="content">
<o:breadcrumbs crumb="Manage Clients"/> <o:breadcrumbs crumb="Manage Clients"/>
<div class="well">
<a class="btn btn-small btn-primary" href="#">New Client</a>
</div>
<table id="client-table" class="table">
<thead>
<tr>
<th>Name</th>
<th>Redirect URL</th>
<th>Grant Types</th>
<th>Scope</th>
<th>Authority</th>
<th>Description</th>
<th>Refresh Tokens</th>
<th class="span1"></th>
<th class="span1"></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div class="well">
<a class="btn btn-small btn-primary" href="#">New Client</a>
</div>
<o:copyright/> <o:copyright/>
</div> </div>
</div> </div>

View File

@ -63,16 +63,28 @@
var ClientListView = Backbone.View.extend({ var ClientListView = Backbone.View.extend({
el: $("#client-table"), el: $(".content"),
initialize:function () { initialize:function () {
this.model.bind("reset", this.render, this); this.model.bind("reset", this.render, this);
}, },
events:{
"click .btn-primary":"newClient"
},
newClient:function () {
alert('new client');
},
render:function (eventName) { render:function (eventName) {
$(this.el).find(".breadcrumb").after($('#tmpl-client-table').html());
_.each(this.model.models, function (client) { _.each(this.model.models, function (client) {
$(this.el).append(new ClientView({model:client}).render().el); $("#client-table").append(new ClientView({model:client}).render().el);
}, this); }, this);
return this; return this;
} }
}); });

View File

@ -1,44 +1,72 @@
<script type="text/html" id="tmpl-client"> <script type="text/html" id="tmpl-client">
<td> <td>
<%=name%> <%=name%>
</td> </td>
<td> <td>
<%=redirectURL%> <%=redirectURL%>
</td> </td>
<td> <td>
<ul> <ul>
<% for (var i in grantType) { %> <% for (var i in grantType) { %>
<li> <li>
<%=grantType[i]%> <%=grantType[i]%>
</li> </li>
<% } %> <% } %>
</ul> </ul>
</td> </td>
<td> <td>
<ul> <ul>
<% for (var i in scope) { %> <% for (var i in scope) { %>
<li> <li>
<%=scope[i]%> <%=scope[i]%>
</li> </li>
<% } %> <% } %>
</ul> </ul>
</td> </td>
<td> <td>
<%=authority%> <%=authority%>
</td> </td>
<td> <td>
<%=description%> <%=description%>
</td> </td>
<td><input type="checkbox" <td><input type="checkbox"
<%=(refreshTokens == 1 ? 'checked' : '')%> <%=(refreshTokens == 1 ? 'checked' : '')%>
value="" id="" name="" disabled> value="" id="" name="" disabled>
</td> </td>
<td> <td>
<button class="btn btn-edit">edit</button> <button class="btn btn-edit">edit</button>
</td> </td>
<td> <td>
<button class="btn btn-danger btn-delete">delete</button> <button class="btn btn-danger btn-delete">delete</button>
</td> </td>
</script> </script>
<script type="text/html" id="tmpl-client-table">
<div class="well">
<a class="btn btn-small btn-primary" href="#">New Client</a>
</div>
<table id="client-table" class="table">
<thead>
<tr>
<th>Name</th>
<th>Redirect URL</th>
<th>Grant Types</th>
<th>Scope</th>
<th>Authority</th>
<th>Description</th>
<th>Refresh Tokens</th>
<th class="span1"></th>
<th class="span1"></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div class="well">
<a class="btn btn-small btn-primary" href="#">New Client</a>
</div>
</script>