Ember.JS отзывчивый шаблон

Question

Этот вопрос больше о понимании точки зрения других людей в другом, чтобы иметь более масштабируемое приложение Ember.JS и прояснить, какой будет лучший подход для решения этой ситуации.

У меня есть шаблон под названием posts.hbs, и я представляю совершенно другую структуру для мобильных и настольных компьютеров.

Однако все функции одинаковы, а это значит, что в моих контроллерах на мобильных устройствах вызывают те же действия и функции, что и на рабочем столе.

Чтобы проверить, если пользователь получает доступ к сайту с мобильного устройства или на рабочем столе, я пользователь следующее условие на моем шаблоне:

{{#if dekstop}} 

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

{{else}} 

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

{{/if}} 

Проблема здесь в том, что, поскольку развивается как мобильные и настольные структуры много компонентов и HTML, у меня есть более 500 строк. Он слишком велик, и он становится запутанным для поддержания этого кода.

Один из вариантов, который я вижу, это создать два различных шаблона:

• сообщения-desktop.hbs
• сообщений-mobile.hbs

А также:

• контроллеры/posts-desktop.js
• контроллеры/сообщения-мобильные .js

И:

• маршрут/сообщений-desktop.js
• маршрут/сообщений-mobile.js

Тогда на моих соответствующих контроллеров и маршрутов, я могу позвонить которые содержат все общие функциональные возможности. Таким образом, я сохраняю функциональность в одном месте, и у меня могут быть свои шаблоны в отдельных местах.

Дополнительная информация:

• Я использую ember.js 1.11.0

Answer 1

Если я правильно понимаю ваш вопрос, мобильные и настольные зрители видят сайт с той же функциональностью, и вы используя условный код, чтобы показывать разные макеты сайта пользователям на основе их устройства.

Если ваши проблемы создают код, который легко поддерживать, и сайт, который реагирует и адаптируется к различным видовым экранам, вы считаете, что используете стандартные адаптивные и адаптивные методы проектирования?

Вместо вашего условного кода все пользователи получают одинаковый HTML-код, вы используете один шаблон, а затем полагаетесь на стандартные адаптивные методы проектирования и мультимедийные запросы, чтобы изменить макет экрана на основе размера видового экрана.

Отказ от ответственности - выше, что я делаю на сайтах MVC, я не человек ember.js goto, поэтому приношу свои извинения заранее, если я упустил что-то очевидное.

Answer 2

Вы можете использовать этот аддон https://freshbooks.github.io/ember-responsive/

и {{outlet 'sub1'}} для реализации суб-шаблоны

Answer 3

Я не уверен, если он поддерживает угасающий 1,11 (doubtful-- хотя вы должны обновить!), Но я очень рекомендуем использовать https://github.com/runspired/flexi.

Вместо одного template.hbs Flexi позволяет определить несколько «макетов» (шаблоны для разных размеров экрана) в каталоге -layouts и позаботится о логике, необходимой для переключения между ними. У этого есть много других особенностей кроме.