Highway showing / hiding visualized views

Question

New to use Highways and has a very simple application. Mostly there are Clients and ClientItems . I have a view to show all the Clients, and if you click on the Client, you will be taken to their ClientItems. Going to this ClientItems view should simply hide the Customers view and return to the Clients that should hide ClientItems. Now, in my render() function for each view, it browses through collections and dynamically adds material to the page. When I go back and forth between them (using the "Back" button), I do not need to completely display again, since all the data on the page is just hidden. Where should this logic go? I am using it in the render() function right now, but it feels messy, what is the preferred way to handle this?

Answer 1

We use the global App variable with a few common functions used in the application:

 var App = { initialize : function() { App.views = { clientView : new ClientsView(), clientItemView : new ClientsItemsView() } }, showView: function(view){ if(App.views.current != undefined){ $(App.views.current.el).hide(); } App.views.current = view; $(App.views.current.el).show(); }, ... } 

And then I use this App from other parts of the application:

 App.showView(App.views.clientView); 

Answer 2

IntoTheVoid has a good solution - it's nice to have a place to hide / view. But how do you activate the logic?

In my experience, routers are the best place to do this. When the route changes and the corresponding function is called, you must update the active, visible view (s).

What if you need to see several views at once? If you have a primary view that always changes when you change the route, as well as several auxiliary widgets, you do not need to worry. But if it’s more complicated, consider creating a ComboView that neatly packs all the relevant views into one containing an el node. Thus, the above logic still works, and your router functions are not dotted with logic to control which views are currently visible.