Ember.JS 响应式模板答案

【问题标题】：Ember.JS responsive templateEmber.JS 响应式模板
【发布时间】：2016-11-14 12:23:02
【问题描述】：

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

我有一个名为 posts.hbs 的模板，我为移动设备和桌面设备提供了完全不同的结构。

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

为了验证用户是使用移动设备还是台式机访问网站，我在我的模板中使用了以下条件：

{{#if dekstop}}

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

{{else}} 

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

{{/if}}

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

我看到的另一种选择是创建两个不同的模板：

还有：

还有：

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

附加信息：

【问题讨论】：

【解决方案1】：

我不确定它是否支持 Ember 1.11（值得怀疑——尽管你应该升级！），但我强烈建议使用 https://github.com/runspired/flexi。

Flexi 允许您在-layouts 目录中定义多个“布局”（不同屏幕尺寸的模板），而不是一个template.hbs，并负责在它们之间切换所需的逻辑。除此之外，它还有许多其他功能。

【讨论】：

【解决方案2】：

你可以使用这个插件 https://freshbooks.github.io/ember-responsive/

和{{outlet 'sub1'}}实现子模板

【讨论】：

【解决方案3】：

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

如果您关心的是创建易于维护的代码，以及响应式和适应不同视口的网站，那么您是否考虑过使用标准的响应式和自适应设计技术？

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

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

【讨论】：

您好，谢谢您的回答。我已经考虑过在这里使用媒体查询。我实际上在应用程序的其他部分使用它，但在这个页面中，HTML 结构需要不同。尽管我找到的解决方案似乎工作正常，但我的担忧仍然依赖于性能和最佳实践。我确实相信其他开发人员也面临同样的情况，我想听听更有经验的人在这里有哪些选择