I have a parent object (a display window) and it has a few child objects (buttons and controls on the window). I would like one child object to hide itself when another is clicked. Currently, I have my parent object bind to a custom event expected to be fired from the child object. Then, the parent object passes the command on to its other child.
Example:
//Namespace for the 'Orders' page.
$(function Orders() {
"use strict";
var orders = $('#Orders');
var ordersSearchResult = new OrdersSearchResult();
var ordersSearchDisplay = new OrdersSearchDisplay();
var ordersEditDisplay = new OrdersEditDisplay();
ordersSearchResult.selector.bind('searchResultLinkClicked', function () {
ordersEditDisplay.hide();
ordersSearchDisplay.fadeIn();
});
});
I have two questions / concerns about this code:
- I expose a property called 'selector' for
ordersSearchResult
. This is a direct reference to the jQuery DOM element. As I understand it this is bad practice -- objects should expose methods to affect their DOM elements, but not the DOM elements themselves. Previously, I passed theonSearchResultLinkClicked
anonymous function into a method ofordersSearchResult
which bound the event to the selector internally. I felt that that implementation was counter-intuitive, though, as it did not read very clearly to see anonymous functions being passed into 'binding' methods. ordersEditDisplay
andordersSearchDisplay
expose methodshide()
andfadeIn()
which affect their DOM elements, butordersEditDisplay
/ordersSearchDisplay
are not DOM elements themselves. Is it bad practice to 'confuse' other developers like this? The code could read:ordersEditDisplay.selector.hide()
but I did not want to expose the selector publically.