Ember.JS responsive template

This question is more about understand other people's point of view in other to have a more scalable Ember.JS application and clarify what would be the best approach to deal with this kind of situation.

I have a template called posts.hbs and I present a totally different structure for mobile and desktop.

However, all the functionalities are the same, which means that in my controllers, the same actions and functions called on desktop are called on mobile.

To verify if the user is accessing the site with a mobile device or desktop, I user the following condition on my template:

The issue here is that, because the both mobile and desktop structures evolves a lot of components and HTML, I have a with more than 500 lines. It's too big and it's becoming confusing to maintain this code.

One alternative that I see is create two different templates:

• posts-desktop.hbs
• posts-mobile.hbs

As well as:

• controllers/posts-desktop.js
• controllers/posts-mobile.js

And:

• route/posts-desktop.js
• route/posts-mobile.js

Then on my respective controllers and routes, I can call mixins containing all the common functionalities. This way, I keep the functionalities in one place and I can have my templates in separated places.

Additional information:

• I am using Ember.JS 1.11.0