How create gmail like common control bar in Canjs?

Question

For example we make a Gmail clone in canjs. Consider each item in the sidebar being rendered with a component of its own. Now I want a single control bar just like gmail to control the activities inside the components.

How should I approach it???

At present am looking at the change event of localStorage, is there a better solution to this???

Answer 1

I would recommend using an appstate Map or a page level component that holds the state for the features of your toolbar. If using an appstate, you could use can.route.map to bind certain features of the appstate Map to the route, so the state of your app can be controlled by the URL. A page attribute, for example, would control which main page is displayed (say, the message list or the contacts list.) You could then listen for certain values of page in your stache template to switch to showing the correct page. This snippet would show the message-list whenever the page attribute of the appstate is 'messages': {{#is appstate.page 'messages}}<message-list></message-list>{{/is}}

If you had more specifics of which feature is hardest to figure out how to implement, I might be able to give more specific advice.