Partial rendering and apply it to the databases pagination
Project: http://git-wip-us.apache.org/repos/asf/couchdb/repo Commit: http://git-wip-us.apache.org/repos/asf/couchdb/commit/d17f8c89 Tree: http://git-wip-us.apache.org/repos/asf/couchdb/tree/d17f8c89 Diff: http://git-wip-us.apache.org/repos/asf/couchdb/diff/d17f8c89 Branch: refs/heads/route-events Commit: d17f8c89ce0a6d9410e8c8c7f0647efbd1276022 Parents: 6d4b5ee Author: Russell Branca <[email protected]> Authored: Tue Apr 9 13:48:16 2013 -0400 Committer: Garren Smith <[email protected]> Committed: Thu May 9 09:59:58 2013 +0200 ---------------------------------------------------------------------- src/fauxton/app/api.js | 47 ++++++++++++++++++--- src/fauxton/app/modules/databases/routes.js | 17 ++++++-- src/fauxton/app/modules/databases/views.js | 4 ++ src/fauxton/app/router.js | 2 +- 4 files changed, 58 insertions(+), 12 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/couchdb/blob/d17f8c89/src/fauxton/app/api.js ---------------------------------------------------------------------- diff --git a/src/fauxton/app/api.js b/src/fauxton/app/api.js index b82107e..085291d 100644 --- a/src/fauxton/app/api.js +++ b/src/fauxton/app/api.js @@ -104,6 +104,9 @@ function(app, Fauxton) { this.addEvents(); }; + // Piggy-back on Backbone's self-propagating extend function + FauxtonAPI.RouteObject.extend = Backbone.Model.extend; + var routeObjectOptions = ["views", "routes", "events", "data", "crumbs", "layout", "apiUrl", "establish"]; _.extend(FauxtonAPI.RouteObject.prototype, Backbone.Events, { @@ -115,13 +118,34 @@ function(app, Fauxton) { crumbs: [], layout: "with_sidebar", apiUrl: null, - establish: function() {} - }, { + renderedState: false, + currTab: "databases", + establish: function() {}, route: function() {}, - initialize: function() {}, + initialize: function() {} + }, { + // By default, rerender is a full rerender + rerender: function() { + this.renderWith.apply(this, arguments); + }, + + // TODO:: combine this and the renderWith function + // All the things should go through establish, as it will resolve + // immediately if its already done, but this way the RouteObject.route + // function can rebuild the deferred as needed + render: function(route, masterLayout, args) { + this.route.apply(this, args); + + if (this.renderedState === true) { + this.rerender.apply(this, arguments); + } else { + this.renderWith.apply(this, arguments); + } + }, + renderWith: function(route, masterLayout, args) { var routeObject = this; - this.route.apply(this, args); + //this.route.apply(this, args); masterLayout.setTemplate(this.layout); masterLayout.clearBreadcrumbs(); @@ -159,10 +183,15 @@ function(app, Fauxton) { }); if (this.get('apiUrl')) masterLayout.apiBar.update(this.get('apiUrl')); + + // Track that we've done a full initial render + this.renderedState = true; }, + get: function(key) { return _.isFunction(this[key]) ? this[key]() : this[key]; }, + addEvents: function(events) { events = events || this.get('events'); _.each(events, function(method, event) { @@ -174,18 +203,22 @@ function(app, Fauxton) { this.on(event, method); }, this); }, + _configure: function(options) { - /* _.each(_.intersection(_.keys(options), routeObjectOptions), function(key) { this[key] = options[key]; }, this); - */ - _.each(options, function(val, key) { this[key] = val; }, this); }, + + getView: function(selector) { + return this.views[selector]; + }, + setView: function(selector, view) { this.views[selector] = view; return view; }, + getViews: function() { return this.views; } http://git-wip-us.apache.org/repos/asf/couchdb/blob/d17f8c89/src/fauxton/app/modules/databases/routes.js ---------------------------------------------------------------------- diff --git a/src/fauxton/app/modules/databases/routes.js b/src/fauxton/app/modules/databases/routes.js index 376a94a..b7f1dbb 100644 --- a/src/fauxton/app/modules/databases/routes.js +++ b/src/fauxton/app/modules/databases/routes.js @@ -22,7 +22,7 @@ define([ ], function(app, FauxtonAPI, Databases, Views) { - var allDbsRouteObject = Databases.AllDbsRouteObject = new FauxtonAPI.RouteObject({ + var AllDbsRouteObject = FauxtonAPI.RouteObject.extend({ layout: "with_sidebar", crumbs: [ @@ -39,14 +39,23 @@ function(app, FauxtonAPI, Databases, Views) { this.databases = new Databases.List(); this.deferred = FauxtonAPI.Deferred(); - this.setView("#dashboard-content", new Views.List({ + this.databasesView = this.setView("#dashboard-content", new Views.List({ collection: this.databases })); - this.setView("#sidebar-content", new Views.Sidebar({ + this.sidebarView = this.setView("#sidebar-content", new Views.Sidebar({ collection: this.databases })); }, + route: function() { + var params = app.getParams(); + this.databasesView.setPage(params.page); + }, + + rerender: function() { + this.databasesView.render(); + }, + establish: function() { var databases = this.databases; var deferred = this.deferred; @@ -119,7 +128,7 @@ function(app, FauxtonAPI, Databases, Views) { }; */ - Databases.RouteObjects = [allDbsRouteObject]; + Databases.RouteObjects = [new AllDbsRouteObject()]; return Databases; }); http://git-wip-us.apache.org/repos/asf/couchdb/blob/d17f8c89/src/fauxton/app/modules/databases/views.js ---------------------------------------------------------------------- diff --git a/src/fauxton/app/modules/databases/views.js b/src/fauxton/app/modules/databases/views.js index 1a02979..6b9cfea 100644 --- a/src/fauxton/app/modules/databases/views.js +++ b/src/fauxton/app/modules/databases/views.js @@ -87,6 +87,10 @@ function(app, Fauxton, FauxtonAPI) { })); }, + setPage: function(page) { + this.page = page || 1; + }, + afterRender: function() { var dbLimit = this.dbLimit; var ajaxReq; http://git-wip-us.apache.org/repos/asf/couchdb/blob/d17f8c89/src/fauxton/app/router.js ---------------------------------------------------------------------- diff --git a/src/fauxton/app/router.js b/src/fauxton/app/router.js index efd7cad..d75fe5a 100644 --- a/src/fauxton/app/router.js +++ b/src/fauxton/app/router.js @@ -112,7 +112,7 @@ function(req, app, Initialize, FauxtonAPI, Fauxton, Layout, Databases, Documents _.each(routeObject.routes, function(route) { //this.route(route, route.toString(), _.partial(routeObject.renderWith, route, this.masterLayout)); this.route(route, route.toString(), function() { - routeObject.renderWith(route, masterLayout, arguments); + routeObject.render(route, masterLayout, arguments); }); }, this); },
