如何使用 ember.js 开发多平台应用

Question

我想用ember.js实现多平台。对于iPhone，智能手机的设计是一样的，而iPad的设计和分辨率是不一样的。 对于手机，它将包含标题栏和 appBody 出口

    "<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 中渲染到不同的模板？ 请提出建议。 谢谢你！

Answer 1

使用 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 媒体查询处理显示的内容和隐藏的内容。