added refresh buttons to all tables, fixed loading behavior to a proper cascading function call

pull/263/head
Justin Richer 2012-11-15 16:55:51 -05:00
parent a88ae8258a
commit 9064b49a54
2 changed files with 65 additions and 19 deletions

View File

@ -366,7 +366,8 @@
}, },
events:{ events:{
"click .btn-primary":"newClient" "click .new-client":"newClient",
"click .refresh-table":"refreshTable"
}, },
newClient:function () { newClient:function () {
@ -384,6 +385,15 @@
}, this); }, this);
return this; return this;
},
refreshTable:function() {
var _self = this;
this.model.fetch({
success: function() {
_self.render();
}
});
} }
}); });
@ -629,7 +639,9 @@
initialize:function() { }, initialize:function() { },
events: { }, events: {
"click .refresh-table":"refreshTable"
},
render:function (eventName) { render:function (eventName) {
$(this.el).html($('#tmpl-grant-table').html()); $(this.el).html($('#tmpl-grant-table').html());
@ -645,6 +657,15 @@
}, this); }, this);
return this; return this;
},
refreshTable:function() {
var _self = this;
this.model.fetch({
success: function() {
_self.render();
}
});
} }
}); });
@ -702,7 +723,9 @@
//this.model.bind("reset", this.render, this); //this.model.bind("reset", this.render, this);
}, },
events:{ }, events:{
"click .refresh-table":"refreshTable"
},
render:function (eventName) { render:function (eventName) {
$(this.el).html($('#tmpl-whitelist-table').html()); $(this.el).html($('#tmpl-whitelist-table').html());
@ -720,8 +743,16 @@
}, this); }, this);
return this; return this;
} },
refreshTable:function() {
var _self = this;
this.model.fetch({
success: function() {
_self.render();
}
});
}
}); });
var WhiteListView = Backbone.View.extend({ var WhiteListView = Backbone.View.extend({
@ -894,19 +925,16 @@
// //
// load things in the right order: // load things in the right order:
this.clientList.fetch({
this.clientList.on('reset', function(collection, response) { success: function(collection, response) {
app.whiteListList.fetch(); app.whiteListList.fetch({
}); success: function(collection, response) {
this.whiteListList.on('reset', function(collection, response) {
var baseUrl = $.url($('base').attr('href')); var baseUrl = $.url($('base').attr('href'));
Backbone.history.start({pushState: true, root: baseUrl.attr('relative') + 'manage/'}); Backbone.history.start({pushState: true, root: baseUrl.attr('relative') + 'manage/'});
}
});
}
}); });
// start the loading process
this.clientList.fetch();
}, },

View File

@ -19,7 +19,8 @@
<script type="text/html" id="tmpl-client-table"> <script type="text/html" id="tmpl-client-table">
<div class="well"> <div class="well">
<button class="btn btn-small btn-primary">New Client</button> <button class="btn btn-small refresh-table"><i class="icon-refresh"></i></button>
<button class="btn btn-small btn-primary new-client">New Client</button>
</div> </div>
<table id="client-table" class="table"> <table id="client-table" class="table">
@ -35,7 +36,8 @@
</table> </table>
<div class="well"> <div class="well">
<button class="btn btn-small btn-primary">New Client</button> <button class="btn btn-small refresh-table"><i class="icon-refresh"></i></button>
<button class="btn btn-small btn-primary new-client">New Client</button>
</div> </div>
</script> </script>
@ -280,6 +282,10 @@
</script> </script>
<script type="text/html" id="tmpl-whitelist-table"> <script type="text/html" id="tmpl-whitelist-table">
<div class="well">
<button class="btn btn-small refresh-table"><i class="icon-refresh"></i></button>
</div>
<table id="whitelist-table" class="table"> <table id="whitelist-table" class="table">
<thead> <thead>
<tr> <tr>
@ -292,6 +298,10 @@
</tbody> </tbody>
</table> </table>
<div class="well">
<button class="btn btn-small refresh-table"><i class="icon-refresh"></i></button>
</div>
</script> </script>
<script type="text/html" id="tmpl-whitelist-form"> <script type="text/html" id="tmpl-whitelist-form">
@ -334,6 +344,10 @@
<h2>Your approved sites</h2> <h2>Your approved sites</h2>
<div class="well">
<button class="btn btn-small refresh-table"><i class="icon-refresh"></i></button>
</div>
<table id="grant-table" class="table"> <table id="grant-table" class="table">
<thead> <thead>
<tr> <tr>
@ -348,6 +362,10 @@
</tbody> </tbody>
</table> </table>
<div class="well">
<button class="btn btn-small refresh-table"><i class="icon-refresh"></i></button>
</div>
</script> </script>
<script type="text/html" id="tmpl-grant"> <script type="text/html" id="tmpl-grant">