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 ，并负责在它们之间切换所需的逻辑。 它还有许多其他功能。