Best application design for mobile optimized web app

I’m developing an ember app that is optimized for mobile, and given the following UI, am wondering what the best design for the nested templates would be.

The main navigation is a menu that slides out from the left of the screen with links to the main areas of the app. Like many mobile apps, this one has a navigation at the top that contains text for the title of the current page and two buttons on either side of the title with various functionality, also depending on the current page. The main content is displayed below the navigation.

Currently, the template nesting looks like this:


  • render “slide_menu”
  • render “top_nav”
  • outlet
  • nested template level 1 (Ex/ Posts)
  • outlet
    • nested template level 2 (Ex/ Post)

Note: Upon clicking on a post, the main content for posts animates (slides) over to the left to then display a post in the main content area. The top nav then changes to show buttons for editing the post and transitioning back to the posts route.

The problem with this structure is that in order for the top nav to monitor the varying actions it might support (based on the current route), I need to implement a very ugly system of sending actions from the top nav to the application controller which then finally calls a method in the controller for the current route where the logic for the action is stored. This is so that I don’t need to store ALL of the possible action logic in either the top nav controller or the application controller, but rather the controller for the route that actually uses the logic. In case it is unclear what sort of actions I’m talking about, for example, on the posts route I need the top nav to display an edit button at the right so that a user can edit that post’s information.

As a better solution, I was thinking of moving the top nav from out of the application template and into the template for the current route. This would allow the current route’s controller to directly catch and handle actions in the top nav (after they are bubbled/sent out from the component). However, one of the problems with this system (other than it feeling slightly awkward considering that the top nav is global yet included in each route template) is that when I try to start animating the route transitions, with billysbilling’s animated outlet project for example, the transition affects the navigation in addition to the main content. Originally I was moving the parent html out of view (to create a mobile view of just that child) and using this animate the transition but now that would also move over the navigation, which would look odd considering it should be global.

Given that background, my question is:

Is there an optimal ember nested-template design for traditionally structured, mobile optimized web apps with global, top navigations?

Sounds like your actions should be on your routes not your controllers which would solve your issues with action bubbling

How so? Would an action in a component template automatically bubble to the route of the template that the component was rendered in?

It will bubble to all active routes

1 Like