Ember.JS responsive Vorlage

Question

Diese Frage ist mehr über andere Sichtweise der anderen zu verstehen, um eine skalierbarere Ember.JS-Anwendung zu haben und zu klären, was wäre der beste Ansatz, um mit dieser Art von Situation umzugehen.

Ich habe eine Vorlage namens posts.hbs und ich präsentiere eine völlig andere Struktur für mobile und Desktop.

Allerdings sind alle Funktionalitäten gleich, was bedeutet, dass in meinen Controllern die gleichen Aktionen und Funktionen aufgerufen werden, die am Desktop auf dem Mobiltelefon aufgerufen werden.

Um zu überprüfen, ob der Benutzer die Seite mit einem mobilen Gerät oder Desktop-Zugriff auf I Benutzer die folgende Bedingung auf meiner Vorlage:

{{#if dekstop}} 

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

{{else}} 

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

{{/if}} 

Die hier Problem ist, dass, weil die beiden mobilen und Desktop-Strukturen entwickelt sich viele Komponenten und HTML habe ich mit mehr als 500 Zeilen. Es ist zu groß und es wird verwirrend, diesen Code beizubehalten.

Eine Alternative, die ich sehe, ist, zwei verschiedene Vorlagen erstellen:

• Beiträge-desktop.hbs
• Beiträge-mobile.hbs

Neben:

• Controller/Beiträge-desktop.js
• Controller/Posts-Mobile Js

Und:

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

Dann auf meinen jeweiligen Steuerungen und Routen, kann ich anrufen Mixins, die alle üblichen Funktionalitäten enthalten. Auf diese Weise behalte ich die Funktionalitäten an einem Ort und kann meine Vorlagen an getrennten Stellen haben.

Zusätzliche Informationen:

• Ich bin mit Ember.js 1.11.0

Answer 1

Wenn ich Ihre Frage richtig verstanden habe, mobile und Desktop-Zuschauer sehen eine Website mit der gleichen Funktionalität, und Sie sind Verwenden von Bedingungscode, um Benutzern verschiedene Layouts der Site basierend auf ihrem Gerät anzuzeigen.

Wenn Ihre Bedenken Code erstellen, der leicht zu pflegen ist, und eine Website, die reaktionsschnell ist und sich an verschiedene Ansichtsfenster anpasst, haben Sie dann in Betracht gezogen, Standard-Responsive- und Adaptive-Design-Techniken zu verwenden?

Anstelle des bedingten Codes erhalten alle Benutzer den gleichen HTML-Code, Sie verwenden die eine Vorlage und verlassen sich dann auf standardmäßige responsive Designtechniken und Medienabfragen, um das Bildschirmlayout basierend auf der Größe des Darstellungsbereichs zu ändern.

Haftungsausschluss - das oben genannte ist, was ich auf MVC-Sites mache, ich bin kein ember.js goto Person so Entschuldigung im Voraus, wenn ich etwas offensichtlich vermisse.

Answer 2

Sie könnten dieses Addon https://freshbooks.github.io/ember-responsive/

und {{outlet 'sub1'}} verwenden Unter Vorlagen zu implementieren

Answer 3

Ich bin nicht sicher, ob es Ember unterstützt 1,11 (doubtful-- obwohl Sie sollten ein Upgrade!), Aber ich hoch empfehlen, https://github.com/runspired/flexi zu verwenden.

Anstelle von template.hbs können Sie mit Flexi mehrere "Layouts" (Vorlagen für verschiedene Bildschirmgrößen) in einem Verzeichnis definieren und die erforderliche Logik zum Umschalten zwischen ihnen vornehmen. Es hat viele andere Funktionen neben.