Javascript Ember.JS响应模板

这个问题更多的是关于理解其他人的观点，以拥有一个更具可伸缩性的Ember.JS应用程序，并阐明处理这种情况的最佳方法

我有一个名为

posts.hbs

的模板，我为移动和桌面提供了一个完全不同的结构

但是，所有功能都是相同的，这意味着在我的控制器中，在桌面上调用的相同操作和功能在移动设备上调用

要验证用户是否使用移动设备或桌面访问站点，请在模板上输入以下条件：

{{#if dekstop}}

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

{{else}} 

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

{{/if}}

这里的问题是，因为移动和桌面结构都演变了很多组件和HTML，所以我有一个超过500行的文档。它太大了，维护这段代码变得很混乱

我看到的一个备选方案是创建两个不同的模板：

• posts-desktop.hbs
• posts-mobile.hbs

以及：

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

以及：

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

然后在我各自的控制器和路由上，我可以调用包含所有公共功能的mixin。这样，我将功能保留在一个地方，我可以将模板放在不同的地方

其他信息：

• 我正在使用Ember.JS 1.11.0

---

如果我正确理解了您的问题，移动和桌面浏览者会看到具有相同功能的网站，而您使用的条件代码只是根据用户的设备向用户显示不同的网站布局

如果您关注的是创建易于维护的代码，以及一个能够响应并适应不同视口的站点，那么您是否考虑过使用标准响应和自适应设计技术

所有用户都获得相同的HTML，而不是条件代码，而是使用一个模板，然后依靠标准响应设计技术和媒体查询根据视口大小更改屏幕布局

---

免责声明——以上是我在MVC网站上所做的，我不是ember.js goto人，因此如果我遗漏了一些明显的内容，请提前道歉。

如果我正确理解您的问题，手机和桌面观众会看到具有相同功能的网站，您使用的条件代码仅用于根据用户的设备向用户显示站点的不同布局

如果您关注的是创建易于维护的代码，以及一个能够响应并适应不同视口的站点，那么您是否考虑过使用标准响应和自适应设计技术

所有用户都获得相同的HTML，而不是条件代码，而是使用一个模板，然后依靠标准响应设计技术和媒体查询根据视口大小更改屏幕布局

免责声明——以上是我在MVC网站上所做的，我不是一个ember.js goto人，因此如果我遗漏了一些明显的东西，请提前道歉。

您可以使用此插件

和

{{outlet'sub1'}}

要实现子模板

您可以使用此插件

---

和

{{outlet'sub1'}}

来实现子模板

我不确定它是否支持Ember 1.11（值得怀疑——尽管您应该升级！），但我强烈建议使用

---

Flexi允许您在

-layouts

目录中定义多个“布局”（不同屏幕尺寸的模板），而不是一个

模板.hbs

，并负责在它们之间切换所需的逻辑。除此之外，它还有许多其他功能。

我不确定它是否支持Ember 1.11（值得怀疑——尽管您应该升级！），但我强烈建议使用

---

Flexi允许您在

-layouts

目录中定义多个“布局”（不同屏幕尺寸的模板），而不是一个

模板.hbs

，并负责在它们之间切换所需的逻辑。除此之外，它还有许多其他功能。

您好，谢谢您的回答。我已经考虑过在这里使用媒体查询。我实际上在应用程序的其他部分使用它，但是在这个页面中HTML结构需要不同。虽然我找到的解决方案似乎工作正常，但我仍然关注性能和最佳实践。我相信其他开发商也面临同样的情况，我想听听更有经验的人，我们的选择是什么嗨，谢谢你的回答。我已经考虑过在这里使用媒体查询。我实际上在应用程序的其他部分使用它，但是在这个页面中HTML结构需要不同。虽然我找到的解决方案似乎工作正常，但我仍然关注性能和最佳实践。我相信其他开发商也面临同样的情况，我想听听更有经验的人，我们在这里有什么选择