如何使用ember.js開發多平臺應用程序

我想用ember.js來實現乘法平臺。對於iPhone來說，智能手機的設計是一樣的，而iPad的設計和分辨率是不一樣的。 對於手機，它將包含headerbar和appBody出口如何使用ember.js開發多平臺應用程序

"<div class='wrapper'>" + 
    "{{outlet topHeaderBar}}" + 
    "{{outlet appBody}}" + 

"<nav class='nav'>"+

雖然爲iPad，它將包含下面的iPad應用程序模板

"<div class='wrapper'>"+ 
    "<nav class='nav'>"+ 
    "{{outlet leftPanel}}" + 
    "{{outlet rightPanel}}" +

因此，我怎麼能確定我的AppRoute到一旦CSS識別設備，渲染不同的插座。 在上述情況下，我想我可以重用leftPanel和rightPanel的topHeaderBar和appBody。但問題是我如何渲染到我的AppRoute中的不同模板？ 請提出建議。謝謝你！

來源

2013-04-08 Wang Fengfeng

我想知道一些可以幫助識別設備類型的ember.js源代碼，以便最好在AppRoute中定義Redender動作 – 2013-04-08 07:32:43

使用CSS media queries如下。在你的車把模板：

<div class="show-ipad"> 
    {{outlet "ipad-outlet1"}} 
    {{outlet "ipad-outlet2"}} 
</div> 

<div class="show-iphone"> 
    {{outlet "iphone-outlet1"}} 
    {{outlet "iphone-outlet2"}} 
</div>

在樣式表（從this article)採取媒體查詢：

/* iPads (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { 
    .show-iphone { 
    display: none; 
    } 
} 

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 
    .show-ipad { 
    display: none; 
    } 
}

適應媒體查詢您的需求（針對在景觀臺iPad，在人像等）。

在Javascript中不承擔對客戶端設備什麼。只是呈現所有網點的所有設備，並讓CSS媒體查詢處理顯示什麼，什麼是隱藏的。

來源

2013-04-08 07:30:00

有什麼方法可以讓我在js中獲得設備類型的標誌？那麼我可以在函數中使用這個標誌來渲染不同的模板？ – 2013-04-08 09:00:08

您可以使用'navigator.userAgent'屬性（可能有一些包裝用戶代理檢測的庫）。我不確定它有多可靠。 – 2013-04-08 12:18:38

謝謝你，我嘗試了你建議的方法，但是在瀏覽器中，所有的電子郵件都會顯示出來。至於navigator.userAgent，它的作品似乎只能將代碼放在頭部。 '

相關問題

如何使用ember.js開發多平臺應用程序

回答

相關問題