是否有一个现代/轻量级的 javascript 布局库可与backbone.js 等一起使用？
中断之后我又回到了 Web UI，并希望使用backbone.js（或 batman.js，如果它曾经升华的话）、node.js、通过 now.js 等进行通信来创建一个现代的单页 javascript 应用程序 - 但我的问题是我该如何安排？ CSS 对于这种情况不是最佳的，而且我相信 css 固定定位在 iPad 上不起作用（并且 css 布局毁了我的灵魂）。理想情况下，该库适用于桌面和移动布局，但这并不是严格的要求，因为似乎有些库可以很好地处理移动布局。
我只关心支持现代浏览器（webkit 和 FF），并且希望使用 css3 动画和渲染来实现所有内容，而不是传统动画和圆角技巧。我也不关心使用旧浏览器或禁用 js 的人是否无法查看该网站。
似乎很多人都在使用 JQuery（JQuery UI 插件？）或类似的“传统”库，但随着现代 js 库的爆炸式增长，我很惊讶没有任何独立的东西可以与backbone.js 等完美搭配。 。我看到了 jLayout （http://www.bramstein.com/projects/jlayout/），但它缺少我需要的功能（边框布局中的可拖动/可折叠窗格等）。
那么我应该选择传统框架，例如 JQuery + UI 插件还是 Mootools MochaUI 吗？ ExtJS 由于许可问题而被淘汰，UKI 看起来很有前途，但文档似乎严重不足。有人对这些有很好的经验吗？或者还有其他选择吗？或者我应该重新考虑 CSS 布局的痛苦可能性？
更新：
谢谢大家。除非我遗漏了一些东西，否则所有模板解决方案都只是模板解决方案，而不是可以执行我想要的操作的布局框架（具有固定区域的边框布局等）。共识似乎是我应该坚持使用 CSS，可能使用 Compass + Sass 之类的东西？我的理解和经验是，很难做到跨浏览器工作并且在移动设备上不会失败的固定区域边框布局，但我可能还很遥远。我也不确定我是否理解模板的作用，它是自动渲染区域和模型，对吧？
I'm coming back to web UI after a hiatus and looking to create a modern single-page javascript application using backbone.js (or batman.js if it ever desublimates), node.js, communication via now.js etc - but my question is how do I lay the thing out? CSS is not optimal for this case plus I believe css fixed positioning doesn't work on the iPad (and css layout ruins my soul). Ideally the library would work for both desktop and mobile layout, but this is not strictly a requirement as there seem to be libraries that handle mobile layout just fine.
I only care about supporting modern browsers (webkit and FF), and want to use css3 animations and rendering for everything, not legacy animations and rounded corner tricks. I also don't care if people with old browsers or js disabled can't view the site.
It seems like a lot of people are using JQuery (JQuery UI Plugin?) or similar "traditional" libraries, but with the explosion of modern js libraries I'm surprised there is not something standalone that pairs well with the likes of backbone.js. I saw jLayout (http://www.bramstein.com/projects/jlayout/) but it lacks features I need (draggable/collapsable panes in a border layout, etc).
So should I just go with a traditional framework such as JQuery + UI plugin or Mootools MochaUI? ExtJS is out due to licensing, UKI looked promising but seemed insanely under-documented. Does anyone have good experience with these or is there another option? Or should I be reconsidering the painful possibility of CSS layouts?
UPDATE:
Thanks guys. Unless I'm missing something, all the templating solutions are just that - templating solutions, not layout frameworks that can do what I want (border layouts with fixed regions etc). Does the consensus seem to be then I should stick to CSS, possibly using something like Compass + Sass? My understanding and experience was that it is difficult to do fixed-region border layouts that work cross-browser and don't fail on mobile devices, but I could be way off. I'm also not sure I understand the role of templating here, it's to render regions and models automatically right?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
你的问题听起来不像你在寻找一个 javascript 框架，而更像你在寻找一些有助于页面布局的东西。我大量使用 Backbone，并且刚刚开始涉足蝙蝠侠。我认为没有理由不使用这些库/框架。我更喜欢使用轻量级工具并避免使用单一框架。
在我看来，如果您正在构建单页 Web 应用程序，那么扎实的 CSS 知识至关重要。我完全同意你应该咬紧牙关学习它。使用 Less、Stylus 或 SASS 来简化 CSS 是完全可以接受的，但您仍然应该了解这些工具生成的底层 CSS。我个人此时使用Stylus。
如果您想快速启动您的项目并随时学习 CSS，您可能需要查看一些项目。这些将帮助您快速启动和运行，并减少需要从头开始创建的 CSS 数量。
HTML5Boilerplate
这是 HTML 的一个很好的起点，并且包括可靠的 CSS 重置。我个人不会使用整个重置并将其自定义为我需要的。此时确实没有理由不使用 HTML5。即使您不使用 HTML5Boilerplate，仍然可以考虑使用 Modernizr 和 YepNope 进行功能检测和 polyfill 资源加载。
Twitter Bootstrap
该项目包含各种 CSS 样板，以使许多常见的布局功能一致且有吸引力地工作。请注意，这将使您的应用程序有一种“twitterish”的感觉，但当然您可以调整它以使其看起来不同。它使用 LESS 来更轻松地管理 CSS。我可能会在某个时候分叉并将其转换为手写笔。
Semantic.gs
语义网格系统提供了一个网格系统，无需使用 .grid_x 类填充标记。我还没用过，但我打算很快就玩一下。您可能会发现它对于创建布局很有帮助。它还使用 LESS。同样，我可能会分叉并转换为手写笔。
jQuery UI 布局
这是我在应用程序中使用的一个功能强大的布局插件，尽管它是相当重，我最近一直在考虑删除它并使用自定义 CSS/javascript。我创建了选项卡式界面布局和自定义主题，并将其贡献给了 Kevin UI 布局项目。也许你会发现它很有用。以下是其他布局解决方案 基于jquery。
模板预编译器
有大量的模板方案，包括下划线模板、jquery模板、mustache、jade、咖啡卡普等等。我目前正在使用 Jade 并使用 node.js 创建了 tmpl-precompile 项目进行编译，组合并压缩/丑化jade 模板为可以提供给客户端的可执行javascript 函数。 丑化预编译模板并不比原始 HTML 模板大多少，而且它们不需要在客户端编译。将这些模板与 Backbone 一起使用就像在
render方法中调用函数一样简单。Your question sounds less like you are looking for a javascript framework and more like you are looking for something to help with page layout. I use Backbone heavily and just started dabbling with Batman as well. I see no reason to not use these libraries/frameworks. I prefer using lightweight tools and avoid monolithic frameworks.
In my opinion, a solid knowledge of CSS is essential if you are building single page webapps. I totally agree that you should bite the bullet and learn it. Using Less, Stylus, or SASS to simplify your CSS is perfectly acceptable, but you should still understand the underlying CSS that these tools generate. I personally use Stylus at this time.
If you want to jump-start your project and learn CSS as you go, there are a few projects that you might want to look at. These will help you to get up and running quickly and reduce the amount of CSS you need to create from scratch.
HTML5Boilerplate
This is a good starting point for your HTML and includes a solid CSS reset. I personally don't use the entire reset and customize it to just what I need. There really is no reason to not use HTML5 at this point. Even if you don't use HTML5Boilerplate, still look into using Modernizr and YepNope for feature detection and polyfill resource loading.
Twitter Bootstrap
This project includes all sorts of CSS boilerplate to get many common layout features working consistently and attractively. Note that this will make your application have a "twitterish" feel to it, but of course you can tweak it to look different. It uses LESS to more easily manage the CSS. I might fork and convert this to stylus at some point.
Semantic.gs
The Semantic Grid System provides a grid system without filling markup with .grid_x classes. I haven't used it yet, but I plan to play with it soon. You might find it helpful for creating layouts. It also uses LESS. Again, I might fork and convert to stylus.
jQuery UI Layout
This is a powerful layout plugin that I'm using in my application, although it is quite heavy and I've recently been considering removing it and using custom CSS/javascript. I created a tabbed interface layout and custom theme and contributed it to Kevin of the UI Layout project. Perhaps you would find it useful. Here's a list of other layout solutions based on jquery.
Template Precompiler
There are tons of templating soutions, including underscore template, jquery templates, mustache, jade, coffeekup, and so forth. I'm currently using Jade and created the tmpl-precompile project with node.js to compile, combine, and compress/uglify jade templates into executable javascript functions that can be served to the client. The uglified precompiled templates aren't much bigger than raw HTML templates would be, and they don't need to be compiled on the client. Using these templates with Backbone is as simple as calling a function in the
rendermethod.我不会使用它们，但有一些工具包可以进行布局抽象。
作为评论者建议，如果我是你，我会咬紧牙关。 backbone.js 非常接近金属，在我看来，对现代 css/html 组合的深入理解是非常必要的。
我会使用模板和可能的类似 sass 的语言来使 css 更容易接受。
模板化：
CSS 元语言：
乔什
I wouldn't use them, but there are some toolkits that do layout abstraction.
As a commenter suggested, I would bite the bullet if I were you. backbone.js is pretty damn close to the metal, and a solid understanding of modern css/html combo is pretty mandatory imo.
I'd use templates and potentially a sass like language to make css a little more palatable.
Templating:
CSS meta languages:
Josh
也许 microjs 对您有用。您可以查看 模板 库和 css 动画 库，甚至可能是单页应用 库。
Perhaps microjs could be useful to you. You could look at templating libraries and css animation libraries, and even maybe even single page app libraries.
最好的 js 布局插件：
http://masonry.desandro.com
The best js layout plugin around:
http://masonry.desandro.com
一个非常有趣且超轻量级的是 Tempo JS。非常好的json渲染引擎，你会找到关于tempo+backbone的文章。
A very intersting and ultra lightweight is Tempo JS. Very good json render engine and you will find articles about tempo+backbone.