你如何管理Ember.js应用程序的UI布局？

Question

我正在寻找管理Ember应用程序UI布局的选项。

该应用程序在UI布局方面必须非常灵活（可配置），因此具有可以嵌套的布局容器和区域（例如“顶部”，“左侧”，“中心”，“右侧”和“底部”）将非常适合（这是大多数布局管理器管理布局的方式）。

我找到了一些解决方案，但我有些犹豫：

1. yui2-layout-manager (演示) 看起来有点旧/笨重，后继者yui3-layoutmanager已经处于“规划”阶段数月（年？）

2. jquery-ui-layout (演示) 看起来有点臃肿。代码库不公开：似乎项目所有者不希望它太公开（根据我在Google组中读到的内容，有人问为什么它不在GitHub上...）

3. dojotoolkit (演示) 看起来有点“突兀”

总的来说，没有任何解决方案让我感到“好”，我想知道是否应该更好地编写自己的布局管理逻辑。你觉得呢？

- fpauser

Answer 1

请查看以下两个插件：

https://github.com/ghempton/ember-layout

https://github.com/ghempton/ember-routemanager

此外，还可以查看演示：http://ghempton.github.com/ember-layout-example/

编辑：我认为这个项目：https://github.com/flamejs/flame.js 非常接近您想要的功能。

- Yiannis Gkoufas

---

我知道ember-layout，但这与自动屏幕空间管理（屏幕区域的定位和调整大小）无关。 - fpauser

Answer 2

JQuery UI-Layout 在 Ember 中存在问题，因为在布局时，ui-layout 需要一个 ui-layout-center 元素，但 Ember {{outlet}} 通常推迟这些元素的出现。

- Skipster

Answer 3

我终于找到了它：http://www.bramstein.com/projects/jlayout "[..] jLayout JavaScript库提供布局算法来布置组件。组件是一种抽象，可以通过多种方式实现，例如作为HTML5 Canvas绘图中的项目或作为HTML元素。jLayout库允许您专注于绘制单个组件，而不是关注如何在屏幕上排列它们。[..]"

- fpauser

Answer 4

你可以看一下 Twitter 的 Bootstrap。它有一个布局类集合。

http://twitter.github.com/bootstrap/scaffolding.html

- Mike Aski

---

开发一个jQuery-UI主题的应用程序...因此Bootstrap不是一个选择。此外，我正在寻找一个完整功能的布局管理器，支持区域大小调整、显示/隐藏等功能。 - fpauser

jQuery进行了大量DOM操作，如果你想开发一个丰富的交互应用程序，这并不是一个好选择，我更喜欢Bootstrap，它具备大部分jQuery UI提供的所需UI部件...最终取决于你的需求。 - Mudassir Ali