Ember.JS響應式模板

Question

這個問題更多的是了解其他人在其他人的觀點，以獲得更具可擴展性的Ember.JS應用程序，並闡明處理這種情況的最佳方法。

我有一個名為posts.hbs的模板，我提出了一個完全不同的移動和桌面結構。

但是，所有功能都是相同的，這意味着在我的控制器中，在桌面上調用的相同操作和功能在移動設備上調用。

要驗證用戶是否使用移動設備或桌面訪問該網站，我在我的模板上使用以下條件：

{{#if dekstop}}

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

{{else}} 

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

{{/if}}

這里的問題是，因為移動和桌面結構都演變了很多組件和HTML，所以我擁有超過500行。 它太大了，維護這段代碼變得令人困惑。

我看到的另一種選擇是創建兩個不同的模板：

以及：

和：

然后在我各自的控制器和路由上，我可以調用包含所有常用功能的mixin。 這樣，我將功能保存在一個地方，我可以將模板放在分開的位置。

附加信息：

Answer 1

如果我正確理解您的問題，移動和桌面查看器會看到具有相同功能的網站，並且您僅使用條件代碼根據用戶的設備向用戶顯示不同的網站布局。

如果您的關注點是創建易於維護的代碼，以及響應並適應不同視口的站點，那么您是否考慮過使用標准的響應式和自適應設計技術？

您使用一個模板，而不是條件代碼，所有用戶都獲得相同的HTML，然后依靠標准的響應式設計技術和媒體查詢來根據視口大小更改屏幕布局。

免責聲明 - 以上是我在MVC網站上所做的事情，我不是一個ember.js轉到此人，所以如果我遺漏了一些明顯的東西，請提前道歉。

Answer 2

和{{outlet 'sub1'}}來實現子模板

Answer 3

我不確定它是否支持Ember 1.11（可疑 - 雖然你應該升級！），但我強烈建議使用https://github.com/runspired/flexi 。

Flexi允許您在-layouts目錄中定義多個“布局”（不同屏幕尺寸的template.hbs ，而不是一個template.hbs ，並負責在它們之間切換所需的邏輯。 它還有許多其他功能。