ember.js modèles sensibles

Question

Cette question est plus sur comprendre le point de vue d'autres personnes dans d'autres avoir une application plus évolutive ember.js et de préciser quelle serait la meilleure approche pour faire face à ce genre de situation.

J'ai un modèle appelé posts.hbs et je présente une structure totalement différente pour mobile et bureau.

Cependant, toutes les fonctionnalités sont les mêmes, ce qui signifie que dans mes contrôleurs, les mêmes actions et les fonctions appelées sur le bureau sont appelés mobile.

Pour vérifier si l'utilisateur accède au site avec un appareil de bureau ou portable, je l'utilisateur la condition suivante sur mon modèle:

{{#if dekstop}} 

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

{{else}} 

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

{{/if}} 

Le problème ici est que, parce que les deux structures mobiles et de bureau évolue beaucoup de composants et HTML, j'ai un avec plus de 500 lignes. C'est trop grand et il devient confus de maintenir ce code.

Une alternative que je vois est de créer deux modèles différents:

• messages-desktop.hbs
• messages-mobile.hbs

En plus:

• controllers/posts-desktop.js
• contrôleurs/postes-mobiles .js

Et:

• itinéraire/messages-desktop.js
• itinéraire/messages-mobile.js

ensuite sur mes contrôleurs et itinéraires respectifs, je peux appeler mixins contenant toutes les fonctionnalités communes. De cette façon, je garde les fonctionnalités en un seul endroit et je peux avoir mes modèles dans des endroits séparés.

Informations complémentaires:

• J'utilise ember.js 1.11.0

Answer 1

Si je comprends bien votre question, les téléspectateurs mobiles et de bureau voir un site web avec les mêmes fonctionnalités, et vous êtes en utilisant un code conditionnel uniquement pour montrer différentes mises en page du site aux utilisateurs en fonction de leur appareil.

Si vos préoccupations sont la création d'un code qui est facile à maintenir, et un site qui est réactif et s'adapte à différentes fenêtres, alors avez-vous envisagé d'utiliser des techniques de conception adaptatives et réactives standard? À la place de votre code conditionnel, tous les utilisateurs obtiennent le même code HTML, utilisent le même modèle et s'appuient sur les techniques de conception réactive standard et les requêtes média pour modifier la disposition de l'écran en fonction de la taille de la fenêtre.

Clause de non-responsabilité - ce qui précède est ce que je fais sur les sites MVC, je ne suis pas une personne goto ember.js donc excuses à l'avance si je manque quelque chose d'évident.

Answer 2

Vous pouvez utiliser cette addon https://freshbooks.github.io/ember-responsive/

et {{outlet 'sub1'}} à mettre en œuvre des sous-modèles

Answer 3

Je ne sais pas si elle prend en charge Ember 1.11 (doubtful-- si vous devez mettre à jour!), Mais je très recommande d'utiliser https://github.com/runspired/flexi. Au lieu d'un template.hbs, Flexi vous permet de définir plusieurs «mises en page» (modèles pour différentes tailles d'écran) dans un répertoire -layouts et prend en charge la logique nécessaire pour basculer entre les deux. Il a beaucoup d'autres fonctionnalités en plus.