simplify watching/rendering

src/Calendar.render.js

@@ -174,18 +174,21 @@ Calendar.mixin({
 
 
 	bindViewHandlers: function(view) {
+		var _this = this;
+
 		this.listenTo(view, 'before:change', this.startBatchRender);
 		this.listenTo(view, 'change', this.stopBatchRender);
 
-		this.listenTo(view, 'change:title', function(title) {
-			if (view === this.view && title) { // hack
-				this.setToolbarsTitle(title);
+		view.watch('titleForCalendar', [ 'title' ], function(deps) { // TODO: better system
+			if (view === _this.view) { // hack
+				_this.setToolbarsTitle(deps.title);
 			}
 		});
-		this.listenTo(view, 'change:dateProfile', function(dateProfile) {
-			if (view === this.view && dateProfile) { // hack
-				this.currentDate = dateProfile.date; // might have been constrained by view dates
-				this.updateToolbarButtons(dateProfile);
+
+		view.watch('dateProfileForCalendar', [ 'dateProfile' ], function(deps) {
+			if (view === _this.view) { // hack
+				_this.currentDate = deps.dateProfile.date; // might have been constrained by view dates
+				_this.updateToolbarButtons(deps.dateProfile);
 			}
 		});
 	},
@@ -193,6 +196,9 @@ Calendar.mixin({
 
 	unbindViewHandlers: function(view) {
 		this.stopListeningTo(view);
+
+		view.unwatch('titleForCalendar');
+		view.unwatch('dateProfileForCalendar');
 	},
 
 
@@ -246,7 +252,6 @@ Calendar.mixin({
 
 		this.toolbarsManager.proxyCall('deactivateButton', currentView.type);
 
-		currentView.unsetDate();
 		this.unbindViewHandlers(currentView);
 
 		this.renderQueue.queue(function() {

src/View.js

@@ -768,7 +768,7 @@ View.watch('legacyDateProps', [ 'dateProfile' ], function(deps) {
 });
 
 
-View.watch('displayingBase', [ 'dateProfile' ], function(deps) {
+View.watch('displayingBase', [ 'isInDom', 'dateProfile' ], function(deps) {
 	// consider the base rendered when it has received the date profile and an updateSize
 	// (which happens after the rendering queue is drained) has happened.
 	// it's hard to track when every subcomponent has rendered their dates.
@@ -793,7 +793,7 @@ View.watch('reportingEventsResolved', [ 'eventDataSource' ], function(deps) {
 
 
 View.prototype.reportEventsResolved = function() {
-	this.set('eventsResolvedId', Math.random());
+	this.set('eventsResolvedId', Math.random()); // TODO: eventually use formalized system for this
 };
 
 

src/agenda/TimeGrid.js

@@ -157,6 +157,14 @@ var TimeGrid = FC.TimeGrid = InteractiveDateComponent.extend(StandardInteraction
 	------------------------------------------------------------------------------------------------------------------*/
 
 
+	renderDates: function(dateProfile) {
+		this.dateProfile = dateProfile;
+		this.updateDayTable();
+		this.renderSlats();
+		this.renderColumns();
+	},
+
+
 	renderSkeleton: function() {
 		var theme = this.view.calendar.theme;
 
@@ -170,11 +178,9 @@ var TimeGrid = FC.TimeGrid = InteractiveDateComponent.extend(StandardInteraction
 	},
 
 
-	renderSlats: function(dateProfile) {
+	renderSlats: function() {
 		var theme = this.view.calendar.theme;
 
-		this.dateProfile = dateProfile;
-
 		this.slatContainerEl = this.el.find('> .fc-slats')
 			.html(
 				'<table class="' + theme.getClass('tableGrid') + '">' +
@@ -237,12 +243,10 @@ var TimeGrid = FC.TimeGrid = InteractiveDateComponent.extend(StandardInteraction
 	},
 
 
-	renderColumns: function(dateProfile) {
+	renderColumns: function() {
+		var dateProfile = this.dateProfile;
 		var theme = this.view.calendar.theme;
 
-		this.dateProfile = dateProfile;
-		this.updateDayTable(dateProfile);
-
 		this.dayRanges = this.dayDates.map(function(dayDate) {
 			return new UnzonedRange(
 				dayDate.clone().add(dateProfile.minTime),
@@ -648,20 +652,3 @@ var TimeGrid = FC.TimeGrid = InteractiveDateComponent.extend(StandardInteraction
 	}
 
 });
-
-
-TimeGrid.watch('displayingSlats', [ 'dateProfile' ], function(deps) {
-	this.requestRender(this.renderSlats, [ deps.dateProfile ], 'slats', 'destroy');
-});
-
-
-TimeGrid.watch('displayingColumns', [ 'dateProfile' ], function(deps) {
-	this.requestRender(this.renderColumns, [ deps.dateProfile ], 'columns', 'destroy');
-});
-
-
-TimeGrid.watch('displayingDates', [ 'displayingSlats', 'displayingColumns' ], function(deps) {
-	this.isDatesRendered = true;
-}, function() {
-	this.isDatesRendered = false;
-});

src/basic/DayGrid.js

@@ -63,11 +63,20 @@ var DayGrid = FC.DayGrid = InteractiveDateComponent.extend(StandardInteractionsM
 	------------------------------------------------------------------------------------------------------------------*/
 
 
-	// Renders the rows and columns into the component's `this.el`, which should already be assigned.
-	renderGrid: function(dateProfile) {
+	renderDates: function(dateProfile) {
 		this.dateProfile = dateProfile;
-		this.updateDayTable(dateProfile);
+		this.updateDayTable();
+		this.renderGrid();
+	},
 
+
+	unrenderDates: function() {
+		this.removeSegPopover();
+	},
+
+
+	// Renders the rows and columns into the component's `this.el`, which should already be assigned.
+	renderGrid: function() {
 		var view = this.view;
 		var rowCnt = this.rowCnt;
 		var colCnt = this.colCnt;
@@ -384,17 +393,3 @@ var DayGrid = FC.DayGrid = InteractiveDateComponent.extend(StandardInteractionsM
 	}
 
 });
-
-
-DayGrid.watch('displayingGrid', [ 'dateProfile' ], function(deps) {
-	this.requestRender(this.renderGrid, [ deps.dateProfile ], 'grid', 'destroy');
-}, function() {
-	this.requestRender(this.removeSegPopover);
-});
-
-
-DayGrid.watch('displayingDates', [ 'displayingGrid' ], function(deps) {
-	this.isDatesRendered = true;
-}, function() {
-	this.isDatesRendered = false;
-});

src/component/Component.js

@@ -8,10 +8,12 @@ var Component = Model.extend({
 		this.el = el;
 		this.bindGlobalHandlers();
 		this.renderSkeleton();
+		this.set('isInDom', true);
 	},
 
 
 	removeElement: function() {
+		this.unset('isInDom');
 		this.unrenderSkeleton();
 		this.unbindGlobalHandlers();
 

src/component/DateComponent.js

@@ -28,6 +28,9 @@ var DateComponent = FC.DateComponent = Component.extend({
 	constructor: function() {
 		Component.call(this);
 
+		this.defineDisplayingEvents();
+		this.defineEventDataSourceInChildren();
+
 		this.uid = String(DateComponent.guid++);
 		this.childrenByUid = {};
 
@@ -770,17 +773,21 @@ var DateComponent = FC.DateComponent = Component.extend({
 DateComponent.guid = 0; // TODO: better system for this?
 
 
-DateComponent.watch('dateProfileInChildren', [ 'dateProfile' ], function(deps) {
-	this.setDateProfileInChildren(deps.dateProfile);
+// ordering matters :(
+// update children after updating self, because child rendering of dates/events/etc might rely on corresponding parent rendering.
+
+
+DateComponent.watch('displayingDates', [ 'isInDom', 'dateProfile' ], function(deps) {
+	this.requestRender(this.executeDateRender, [ deps.dateProfile ], 'date', 'destroy');
 }, function() {
-	this.unsetDateProfileInChildren();
+	this.requestRender(this.executeDateUnrender, null, 'date', 'destroy');
 });
 
 
-DateComponent.watch('businessHourGeneratorInChildren', [ 'businessHourGenerator' ], function(deps) {
-	this.setBusinessHourGeneratorInChildren(deps.businessHourGenerator);
+DateComponent.watch('dateProfileInChildren', [ 'dateProfile' ], function(deps) {
+	this.setDateProfileInChildren(deps.dateProfile);
 }, function() {
-	this.unsetBusinessHourGeneratorInChildren();
+	this.unsetDateProfileInChildren();
 });
 
 
@@ -795,20 +802,6 @@ DateComponent.watch('businessHours', [ 'businessHourGenerator', 'dateProfile' ],
 });
 
 
-DateComponent.watch('eventDataSourceInChildren', [ 'eventDataSource' ], function(deps) {
-	this.setEventDataSourceInChildren(deps.eventDataSource);
-}, function(deps) {
-	this.unsetEventDataSourceInChildren(deps.eventDataSource);
-});
-
-
-DateComponent.watch('displayingDates', [ 'dateProfile' ], function(deps) {
-	this.requestRender(this.executeDateRender, [ deps.dateProfile ], 'date', 'destroy');
-}, function() {
-	this.requestRender(this.executeDateUnrender, null, 'date', 'destroy');
-});
-
-
 DateComponent.watch('displayingBusinessHours', [ 'displayingDates', 'businessHours' ], function(deps) {
 	this.requestRender(this.renderBusinessHours, [ deps.businessHours ], 'businessHours', 'init');
 }, function() {
@@ -816,13 +809,33 @@ DateComponent.watch('displayingBusinessHours', [ 'displayingDates', 'businessHou
 });
 
 
-DateComponent.watch('displayingEvents', [ 'displayingDates', 'eventDataSource' ], function(deps) {
-	this.startDisplayingEvents(deps.eventDataSource);
-}, function(deps) {
-	this.stopDisplayingEvents(deps.eventDataSource);
+DateComponent.watch('businessHourGeneratorInChildren', [ 'businessHourGenerator' ], function(deps) {
+	this.setBusinessHourGeneratorInChildren(deps.businessHourGenerator);
+}, function() {
+	this.unsetBusinessHourGeneratorInChildren();
 });
 
 
+// wrapped in a function so subclasses can more easily override, considering the necessary ordering
+DateComponent.prototype.defineDisplayingEvents = function() {
+	this.watch('displayingEvents', [ 'displayingDates', 'eventDataSource' ], function(deps) {
+		this.startDisplayingEvents(deps.eventDataSource);
+	}, function(deps) {
+		this.stopDisplayingEvents(deps.eventDataSource);
+	});
+};
+
+
+// wrapped in a function so subclasses can more easily override, considering the necessary ordering
+DateComponent.prototype.defineEventDataSourceInChildren = function() {
+	this.watch('eventDataSourceInChildren', [ 'eventDataSource' ], function(deps) {
+		this.setEventDataSourceInChildren(deps.eventDataSource);
+	}, function(deps) {
+		this.unsetEventDataSourceInChildren(deps.eventDataSource);
+	});
+};
+
+
 // legacy
 
 function convertEventInstanceHashToLegacyArray(eventInstancesByDefId) {

src/component/DayTableMixin.js

@@ -15,11 +15,11 @@ var DayTableMixin = FC.DayTableMixin = {
 
 
 	// Populates internal variables used for date calculation and rendering
-	updateDayTable: function(dateProfile) {
+	updateDayTable: function() {
 		var view = this.view;
 		var calendar = view.calendar;
-		var date = calendar.msToUtcMoment(dateProfile.renderUnzonedRange.startMs, true);
-		var end = calendar.msToUtcMoment(dateProfile.renderUnzonedRange.endMs, true);
+		var date = calendar.msToUtcMoment(this.dateProfile.renderUnzonedRange.startMs, true);
+		var end = calendar.msToUtcMoment(this.dateProfile.renderUnzonedRange.endMs, true);
 		var dayIndex = -1;
 		var dayIndices = [];
 		var dayDates = [];