将 HAML 模板与 Backbone.js 结合使用的最佳策略
我正在进入 Backbone.js 来为我的项目构建 javascript 代码，并且我喜欢 HAML 在后端（rails）上进行模板化，所以我想将它用于 Backbone 视图模板化。我知道 Javascript 有几个 HAML 端口，例如 https://github.com/creationix/haml-js 和主干轻松支持 JST 和 Mustache。
使用 haml 模板的最佳方法是什么？
在客户端使用 HAML 有什么缺点吗？性能、额外的脚本加载时间（由 jammit 等资产打包工具处理）
Im getting into Backbone.js to structure the javascript code for my project and I love HAML for templating on the backend(rails), so Id like to use it for Backbone Views templating. I know there is several HAML ports to Javascript, like
https://github.com/creationix/haml-js and backbone supports JST and mustache with ease.
Whats the best way to use haml templating instead.
Are there any downsides to using HAML on the client side? Performance, extra script load time(taken care by asset packaging tools like jammit)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（8）
我知道您已经提到过，但我建议将 haml-js 与 Jammit 一起使用。只需将 haml.js 包含在您的 javascript 中，并在 asset.yml 中添加
template_function: Haml并将模板文件包含到包中即可。例如，然后在您的视图中，您可以包含此包 (
= include_javascripts :javascript_templates)，Jammit 会将任何 .jst.haml 文件打包到window.JST['file/path']. javascript_templates.jst" type="text/javascript">）（如果您查看页面源代码，您应该会看到一个 javascript 文件，例如
而 Jammit 会使用 Haml-js 模板函数功能来渲染模板。
注意：请务必在 Gemfile 中指向 Jammit 的 github 存储库，以获取支持 haml-js 工作所需的换行符的最新版本。
I know you already mentioned it but I would suggest using haml-js with Jammit. Simply include haml.js in your javascripts and in your assets.yml add
template_function: Hamlas well as including your template files in to a package. e.g.Then in your views you can include this package (
= include_javascripts :javascript_templates) and Jammit will package any .jst.haml files in towindow.JST['file/path']. (If you view page source you should see a javascript file like<script src="/assets/javascript_templates.jst" type="text/javascript"></script>)To use these templates simply call one of those JSTs Jammit created. i.e.
And Jammit will use the Haml-js template function function to render the template.
Note: Be sure to point to the github repo of Jammit in your Gemfile to get the latest version that supports newline characters necessary for haml-js to work.
我要尝试haml-coffee。 （没有双关语的意思）我对咖啡脚本的赞誉不胜枚举；而且它现在是 Rails 3.1 中的默认设置。现在我可以将 Coffeescript 嵌入到我最喜欢的模板语言中，并预编译该批次。
哦，太高兴了..现在让它开始工作了。
I'm about to give haml-coffee a shot. (no pun intended) I can't sing the praises of coffeescript enough; plus it's a default now in Rails 3.1. Now I can embed coffeescript within my favorite templating language, and pre-compile the lot.
Oh, the joy.. now to get it to work.
我知道这会在某种程度上绕过这个问题，但我们开始吧:)
在我的 Rails 应用程序中，我对后端的所有视图使用 haml。太棒了。由于某些原因（主要是 i18n），我不喜欢在客户端使用模板。我就是这样做的：
您只处理 html，而 jQuery 对此非常有用。对于某些不需要 i18n 的视图，我使用下划线模板，因为它已经存在。
至于 haml 模板性能，小胡子和车把似乎更快。
I know this would somewhat going around the question but here we go :)
I my rails app I use haml for all views on the backend. It is awesome. For some reasons (mainly i18n), I do not like to use templates on the client side. This is how I do it:
You deal only with html and jQuery is awesome for that. For some views that do not requires i18n, I use underscore templating because it's already there.
As for haml templating performance, it seems mustache and handlebars are faster.
我一直在开发 Rails 3/Backbone 应用程序，并在评估 hamlbars、haml_assets，并使用 haml-js。
这些都是为问题提供解决方案的坚实宝石，每一个都有一定的权衡。例如，Haml-js 需要在客户端渲染模板（这没有什么问题，这只是一个权衡）。 Hamlbars 和 haml_assets 都插入资产管道中，但因为它们存在于请求对象之外，所以一些助手将无法工作。两者都为此做了一些调整，并包含 url 帮助程序和 ActionView 帮助程序，但不要期望具有与在视图中编写 haml 相同的功能。
我的方法有点笨重（我计划将其放入引擎中），但它效果很好并且很容易复制。它尽可能使用 haml_assets，但会通过“show”操作从“templates”控制器提供模板
这种方法的好处是，因为您的视图可以从控制器访问，所以您可以选择将它们呈现为 jst 模板（通过模板控制器）或通过其他控制器作为部分视图。这将允许您直接从 url（例如 /products/widgets/super-cool-widget）提供 seo 友好的页面，用户可以获得缓存的模板 /templates/widgets/super-cool-widget。
I've been working on Rails 3/Backbone app and have taken a different approach after evaluating hamlbars, haml_assets, and playing around with haml-js.
These are all solid gems which offer solutions to the problem, each having a certain set of trade-offs. Haml-js, for instance, requires rendering templates client side (there's nothing wrong with this, it's simply a tradeoff). Hamlbars and haml_assets both plug into the asset pipeline but because they exist outside of the request object some helpers will not work. Both make some adjustments for this and include url helpers and ActionView helpers, but don't expect to have the same features as writing haml in a view.
My approach is somewhat bulky (I am planning on putting this into an engine) but it works well and easily replicable. It uses haml_assets when possible, but falls back on serving a template from a "templates" controller with a "show" action
The benefit of this approach is that because your views are accessible from controllers, you have the option to render them as jst templates (via the templates controller) or via other controllers as partials. This would allow you to serve seo-friendly pages directly from url's (like /products/widgets/super-cool-widget) were users may get the cached templated /templates/widgets/super-cool-widget.
我无法在克雷格的帖子上内联回答（我猜我需要某种声誉才能在现有答案上发布），但你不再需要抓住 jammit 的叉子来使用 haml-js ——提交使它成为jammit 的主要分支。有关详细信息，请参阅此处：https://github.com/documentcloud/jammit/commit/b52e429f99cac3cd1aa2bf3ab95f1bfaf478d50d
编辑：最后一次 gem 发布是在 1 月份，提交是在 3 月份添加的，因此您需要设置捆绑器来针对 github 存储库运行或在本地构建它。如果您不使用 jammit 的 HEAD，您将无法正确解析模板，因为换行符已被删除。
设置此功能所需要做的就是：
1）将以下内容添加到我的“ assets.yml" file:
template_function: "Haml"
2) 将我想要加载的 haml-js 源和模板添加到我的资产文件中：
JavaScript：
核：
- 公共/javascripts/vendor/haml.js
模板：
- app/views/events/_form.haml.jst
3) 确保我在 application.html.erb 中加载了核心和模板
<%= include_javascripts :core, :templates %>
4) 通过 JST[filename] 访问我的源文件中的模板（即本例中为 JST['_form']）。值得一提的一个问题是—— jammit 会查看所有模板并将它们命名为公共路径，因此如果您有 app/views/foo/file.jst 和 app/views/bar/file.jst，您就可以访问与 JST['foo/file.jst'] 和 JST['bar/file.jst']。如果您有 app/views/foo/file1.jst 和 app/views/foo/file2.jst，它们将直接位于 JST['file1.jst'] 和 JST['file2.jst'] —— 这是当您开始使用前几个模板时很容易忘记。
一切都很顺利。我不确定为什么 Craig 需要定义一个函数——我只是使用了 haml.js 提供的默认 Haml 函数，但也许我遗漏了一些东西。
I can't answer inline on Craig's thread (I'm guessing I need some sort of reputation to post on existing answers), but you no longer need to grab a fork of jammit to use haml-js -- the commit made it into the main branch of jammit. See here for details: https://github.com/documentcloud/jammit/commit/b52e429f99cac3cd1aa2bf3ab95f1bfaf478d50d
EDIT: the last gem release was in Jan, and the commits were added in March, so you'll need to set up bundler to run against the github repo or build it locally. If you don't use HEAD of jammit you'll have trouble getting the templates to be parsed properly since the newlines are stripped.
All I needed to do to set this up is:
1) Add the following to my "assets.yml" file:
template_function: "Haml"
2) Add the haml-js source and templates I wanted to load to my assets file:
javascripts:
core:
- public/javascripts/vendor/haml.js
templates:
- app/views/events/_form.haml.jst
3) Make sure I was loading both core and templates in my application.html.erb
<%= include_javascripts :core, :templates %>
4) Access templates in my source files via JST[filename] (ie, in this case JST['_form']). One gotcha worth mentioning -- jammit will look at all your templates and namespace them down to the common path, so if you have app/views/foo/file.jst and app/views/bar/file.jst, you'd access with JST['foo/file.jst'] and JST['bar/file.jst']. If you had app/views/foo/file1.jst and app/views/foo/file2.jst, they'd be directly at JST['file1.jst'] and JST['file2.jst'] -- which is easy to forget when you're starting out with your first few templates.
Everything worked quite nicely. I'm not sure why Craig needed to define a function -- I just used the default Haml function provided by haml.js, but maybe I'm missing something.
看起来 https://github.com/netzpirat/haml_coffee_assets 给了你你想要的东西。 （
window.JST模板，用 HAML 编写，具有内联咖啡脚本支持）Looks like https://github.com/netzpirat/haml_coffee_assets gives you what you want. (
window.JSTtemplates, written in HAML, with inline coffescript support)看看中间人。它包括 haml、sass、coffee、slim 等。它像 Rails 一样使用 gem，并且具有许多其他很棒的功能。
http://middlemanapp.com/
他们甚至有一个针对主干的自定义扩展，
https://github.com/middleman/middleman-backbone
它还允许您将其构建到静态 html、css 和 js，可实现超快速加载。
Check out Middleman. It includes haml, sass, coffee, slim, etc. It uses gems like rails does and has a lot of other awesome functionality.
http://middlemanapp.com/
They even have a custom extension for backbone,
https://github.com/middleman/middleman-backbone
It also allows you to build it into static html, css, and js for super fast loading.
您可以尝试使用 Jade 来表达（类似 Haml 的模板）。 Express 构建于 Connect 之上，用于路由静态文件。 Jade 是我在 Node.js 中尝试过的速度更快的模板引擎之一
http://expressjs.com/
You could try Express with Jade (Haml-like templates). Express builds on Connect for routing static files. Jade is one of the faster template engines I've tried with Node.js
http://expressjs.com/