Github user robertkowalski commented on a diff in the pull request:
https://github.com/apache/couchdb-fauxton/pull/820#discussion_r91296234
--- Diff: app/core/routeObject.js ---
@@ -14,325 +14,46 @@ import FauxtonAPI from "./base";
import React from "react";
import ReactDOM from "react-dom";
import Backbone from "backbone";
+import _ from "lodash";
var RouteObject = function (options) {
this._options = options;
this.reactComponents = {};
this._configure(options || {});
this.initialize.apply(this, arguments);
- this.addEvents();
-};
-
-var broadcaster = {};
-_.extend(broadcaster, Backbone.Events);
-
-RouteObject.on = function (eventName, fn) {
- broadcaster.on(eventName, fn);
};
/* How Route Object events work
- To listen to a specific route objects events:
-
- myRouteObject = FauxtonAPI.RouteObject.extend({
- events: {
- "beforeRender": "beforeRenderEvent"
- },
-
- beforeRenderEvent: function (view, selector) {
- console.log('Hey, beforeRenderEvent triggered',arguments);
- },
- });
-
- It is also possible to listen to events triggered from all Routeobjects.
- This is great for more general things like adding loaders, hooks.
-
- FauxtonAPI.RouteObject.on('beforeRender', function (routeObject, view,
selector) {
- console.log('hey, this will trigger when any routeobject renders a
view');
- });
- Current Events to subscribe to:
- * beforeFullRender -- before a full render is being done
- * beforeEstablish -- before the routeobject calls establish
- * afterEstablish -- after the routeobject has run establish
- * beforeRender -- before a view is rendered
- * afterRender -- a view is finished being rendered
- * renderComplete -- all rendering is complete
+Its now very simple. We don't want it to do much. It creates a list of
routes. Then each route callback must return
+a React component that will be rendered into the app
*/
// Piggy-back on Backbone's self-propagating extend function
RouteObject.extend = Backbone.Model.extend;
-var routeObjectOptions = ["views", "routes", "events", "roles", "crumbs",
"layout", "apiUrl", "establish"];
+var routeObjectOptions = ["routes", "roles"];
-_.extend(RouteObject.prototype, Backbone.Events, {
+_.extend(RouteObject.prototype, {
// Should these be default vals or empty funcs?
- views: {},
routes: {},
- events: {},
- crumbs: [],
- layout: "empty",
- apiUrl: null,
- hideNotificationPanel: null,
- loaderClassname: 'loader',
- renderedState: false,
- establish: function () {},
route: function () {},
roles: [],
- _promises: [],
initialize: function () {}
}, {
- renderWith: function (route, masterLayout, args) {
-
- // set the options for this render
- var options = {
- masterLayout: masterLayout,
- route: route,
- args: args
- };
-
- var promiseLayout = this.setTemplateOnFullRender(masterLayout);
-
- this.triggerBroadcast('beforeEstablish');
-
- var renderAllViews = _.bind(this.renderAllViews, this, options),
- establishError = _.bind(this.establishError, this),
- renderComplete = _.bind(this.renderComplete, this),
- callEstablish = _.bind(this.callEstablish, this),
- renderReactComponents = _.bind(this.renderReactComponents, this);
-
- const promise = this.establish();
-
- // Only start the view rendering process once the template has been
rendered
- // otherwise we get double renders
- promiseLayout.then(function () {
- renderReactComponents();
-
- callEstablish(promise)
- .then(renderAllViews, establishError)
- .then(renderComplete, (err) => {
- console.error('renderpipeline broke');
- console.error('check your establish method');
-
- console.log(this.establish.toString());
- console.error(err);
- });
-
-
- }.bind(this));
- },
-
- setTemplateOnFullRender: function (masterLayout) {
-
- var promise = $.Deferred();
-
- // Only want to redo the template if its a full render
- if (!this.renderedState) {
- this.triggerBroadcast('beforeFullRender');
- masterLayout.setTemplate(this.layout).then(promise.resolve,
promise.reject);
- } else {
- promise.resolve();
- }
-
- return promise;
- },
-
- renderReactComponents: function () {
- _.each(this.reactComponents, function (componentInfo, selector) {
- if ($(selector)[0]) {
- ReactDOM.render(React.createElement(componentInfo.component,
componentInfo.props), $(selector)[0]);
- }
- });
- },
-
- callEstablish: function (establishPromise) {
- this.addPromise(establishPromise);
- return FauxtonAPI.when(establishPromise);
- },
-
- renderAllViews: function (options, resp) {
- var routeObject = this,
- renderView = _.bind(this.renderView, this, routeObject, options);
-
- this.triggerBroadcast('afterEstablish');
-
- var promises = _.map(routeObject.getViews(), renderView, this);
- return FauxtonAPI.when(promises);
- },
-
- renderView: function (routeObject, options, view, selector) {
- var viewInfo = {
- view: view,
- selector: selector,
- masterLayout: options.masterLayout
- };
-
- var renderViewOnLayout = _.bind(this.renderViewOnLayout, this,
viewInfo);
-
- if (view.hasRendered) {
- this.triggerBroadcast('viewHasRendered', view, selector);
- return;
- }
-
- this.triggerBroadcast('beforeRender', view, selector);
-
- return this.callEstablish(view.establish()).then(renderViewOnLayout,
this.establishError);
- },
-
- renderViewOnLayout: function (viewInfo, resp, xhr) {
- var masterLayout = viewInfo.masterLayout,
- triggerBroadcast = _.bind(this.triggerBroadcast, this);
-
- masterLayout.setView(viewInfo.selector, viewInfo.view);
- var promise = masterLayout.renderView(viewInfo.selector).promise();
-
- promise.then(function () {
- triggerBroadcast('afterRender', viewInfo.view, viewInfo.selector);
- });
-
- return promise;
- },
-
- establishError: function (resp) {
- if (!resp || !resp.responseText) { return; }
- FauxtonAPI.addNotification({
- msg: 'An Error occurred: ' +
JSON.parse(resp.responseText).reason,
- type: 'error',
- clear: true
- });
- },
-
- renderComplete: function () {
- // Track that we've done a full initial render
- this.setRenderedState(true);
- this.triggerBroadcast('renderComplete');
- },
-
- setRenderedState: function (bool) {
- this.renderedState = bool;
- },
-
- triggerBroadcast: function (eventName) {
- var args = Array.prototype.slice.call(arguments);
- this.trigger.apply(this, args);
-
- args.splice(0, 1, eventName, this);
- broadcaster.trigger.apply(broadcaster, args);
- },
-
--- End diff --
pure joy!
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at [email protected] or file a JIRA ticket
with INFRA.
---
