Question

I have been trying to find some good sources on how to handle application-wide elements when using MVVM for web development. I am using knockoutjs.

By application-wide I mean elements like a site’s navigation. Perhaps each page has a login box, search box, a footer etc.

Should these go into a separate view model? Or should you derive each page’s view model from a base view model containing these? Or should these properties be left out of a view model alltogether?

Thanks in advance.

Answer 1

Consider treating all your supporting components (menu, footer, etc) just the way you treat your business components. Also I recommend having separate viewmodels per UI component regardless of type of the UI component. This makes your components highly loosely coupled.

For example, the menu may have own view model (without being a part of any global viewmodel). Now you may use a PubSub library to implement publisher/subscribe notifications to have loosely coupled communication between different UI components (viewmodels), where your business components may show/hide themselves as per the event request.

But specifically for implementing a menu component, I recommend using a router library that can respond to the URL changes (hashtag part of URL). Then you can simply change URL when users navigate on the mainmenu (simple anchor tag), and your component will be activated/deactivated by the router library. This will let you to bookmark and use browser history buttons.

Have a look at http://boilerplatejs.org which is a reference architecture for large scale JavaScript development. It has all above implemented on it’s sample application. It uses UrlController to activate/deactivate components based on URL changes, where as DomController is used to place components statically on the DOM itself (e.g. for menu, footer, headers ). It uses knockoutjs for most of the sample UI components.

Disclaimer: I’m the founder of BoilerplateJS