Ember.JS响应式模板

Question

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:

{{#if dekstop}}

  {{!-- desktop structure (about 250 lines!) --}}

{{else}} 

  {{!-- mobile structure (about 250 lines!) --}}

{{/if}}

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

Answer 1

If I understand your question correctly, mobile and desktop viewers see a website with the same functionality, and you are using conditional code only to show different layouts of the site to users based on their device.

If your concerns are creating code that is easy to maintain, and a site which is responsive and adapts to different viewports, then have you considered using standard responsive and adaptive design techniques?

Instead of your conditional code all users get the same HTML, you use the one template, and then rely on standard responsive design techniques and media queries to change the screen layout based on viewport size.

Disclaimer -- the above is what I do on MVC sites, I'm not an ember.js goto person so apologies in advance if I'm missing something obvious.

Answer 2

You could use this addon https://freshbooks.github.io/ember-responsive/

and {{outlet 'sub1'}} to implement sub-templates

Answer 3

I'm not sure if it supports Ember 1.11 (doubtful-- though you should upgrade!), but I highly recommend using https://github.com/runspired/flexi .

Instead of one template.hbs , Flexi allows you to define multiple 'layouts' (templates for different screen sizes) in a -layouts directory and takes care of the logic needed to switch between them. It has many other features besides.