javascript 在 Backbone.js 中使用 HAML 模板的最佳策略

Best strategy to use HAML template with Backbone.js

提问by Vlad Gurovich

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-jsand backbone supports JST and mustache with ease.

我正在进入 Backbone.js 来构建我的项目的 javascript 代码，我喜欢 HAML 用于后端（rails）上的模板，所以我喜欢将它用于 Backbone 视图模板。我知道 Javascript 有几个 HAML 端口，例如 https://github.com/creationix/haml-js并且主干轻松支持 JST 和 mustache。

Whats the best way to use haml templating instead.

什么是使用haml 模板的最佳方法。

Are there any downsides to using HAML on the client side? Performance, extra script load time(taken care by asset packaging tools like jammit)

在客户端使用 HAML 有什么缺点吗？性能，额外的脚本加载时间（由 jammit 等资产打包工具负责）

采纳答案by Craig

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.

我知道你已经提到过它，但我建议在 Jammit 中使用 haml-js。只需在您的 javascripts 中包含 haml.js，并在您的 assets.yml 添加template_function: Haml以及将您的模板文件包含到一个包中。例如

  javascript_templates:
    - app/views/**/*.jst.haml

Then in your views you can include this package (= include_javascripts :javascript_templates) and Jammit will package any .jst.haml files in to window.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>)

然后在您的视图中，您可以包含此包 ( = include_javascripts :javascript_templates)，Jammit 会将任何 .jst.haml 文件打包到 .jst.haml 文件中window.JST['file/path']。（如果您查看页面源代码，您应该会看到一个 javascript 文件，例如<script src="/assets/javascript_templates.jst" type="text/javascript"></script>）

To use these templates simply call one of those JSTs Jammit created. i.e.

要使用这些模板，只需调用 Jammit 创建的 JST 之一即可。IE

$('div').html(JST['file/path']({ foo: 'Hello', bar: 'World' }));

And Jammit will use the Haml-js template function function to render the template.

而 Jammit 会使用 Haml-js 模板函数函数来渲染模板。

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.

注意：请务必在您的 Gemfile 中指向 Jammit 的 github 存储库，以获取支持 haml-js 工作所需的换行符的最新版本。

回答by Duke

I'm about to give haml-coffeea 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.

我要试一试haml-coffee。（没有双关语意）我对coffeescript 赞不绝口；加上它现在是 Rails 3.1 中的默认设置。现在我可以在我最喜欢的模板语言中嵌入 coffeescript，并预编译很多。

Oh, the joy.. now to get it to work.

哦，喜悦.. 现在让它开始工作。

回答by Julien

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:

我的 rails 应用程序我使用 haml 来处理后端的所有视图。太棒了。由于某些原因（主要是 i18n），我不喜欢在客户端使用模板。这就是我的做法：

• create all your template in ruby haml and store them into script tag with a funky type (i use text/js-template). This will create prerendered html that you can play with with jquery and backbone.
• when you create your backbone views, load the stored template and append it to your document
• Render your view by altering the preexisting template

• 在 ruby​​ haml 中创建所有模板并将它们存储到带有时髦类型的脚本标记中（我使用 text/js-template）。这将创建可以与 jquery 和主干一起玩的预渲染 html。
• 创建主干视图时，加载存储的模板并将其附加到文档中
• 通过更改预先存在的模板呈现您的视图

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.

您只处理 html，而 jQuery 非常棒。对于一些不需要 i18n 的视图，我使用下划线模板，因为它已经存在了。

As for haml templating performance, it seems mustache and handlebars are faster.

至于haml模板性能，似乎小胡子和把手更快。

回答by mhamrah

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.

我一直在研究 Rails 3/Backbone 应用程序，并在评估hamlbars、haml_assets和玩弄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.

这些都是为问题提供解决方案的固体宝石，每个都有一定的权衡。例如，Haml-js 需要在客户端渲染模板（这没有错，这只是一种权衡）。Hamlbars 和 haml_assets 都插入资产管道，但由于它们存在于请求对象之外，因此某些帮助程序将无法工作。两者都为此做了一些调整，包括 url helpers 和 ActionView helpers，但不要期望具有与在视图中编写 haml 相同的功能。

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

我的方法有点笨重（我计划将其放入引擎中）但它运行良好且易于复制。它在可能的情况下使用 haml_assets，但退回到使用“显示”操作从“模板”控制器提供模板

• Put your views in the view/templates/ directory
• You can add a layout that renders this view into a JST function
• You can specify the show action to return "application/javascript" as its content type
• You have access to all helpers when writing templates
• You can add script tags for "/template/whatever" that will render the whatever template, or use route globbing for better organized views.

• 将您的视图放在 view/templates/ 目录中
• 您可以添加一个布局，将此视图呈现为 JST 函数
• 您可以指定 show 操作以返回“application/javascript”作为其内容类型
• 编写模板时您可以访问所有帮助程序
• 您可以为“/template/whatever”添加脚本标签，以呈现任何模板，或者使用路由通配来更好地组织视图。

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.

这种方法的好处是，因为您的视图可以从控制器访问，您可以选择将它们呈现为 jst 模板（通过模板控制器）或通过其他控制器作为部分呈现。这将允许您直接从 url（如 /products/widgets/super-cool-widget）提供对 seo 友好的页面，因为用户可能会获得缓存的模板化 /templates/widgets/super-cool-widget。

回答by ragaskar

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

我无法在 Craig 的线程上内嵌回答（我猜我需要某种声誉来发布现有答案），但是您不再需要使用 jammit 的叉子来使用 haml-js——提交使它成为jammit 的主要分支。详情请看这里：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.

编辑：上一个 gem 版本是在 1 月，提交是在 3 月添加的，因此您需要设置捆绑程序以针对 github 存储库运行或在本地构建它。如果您不使用 HEAD of jammit，由于换行符被剥离，您将无法正确解析模板。

All I needed to do to set this up is:

我需要做的就是进行设置：

1) Add the following to my "assets.yml" file:

1）将以下内容添加到我的“assets.yml”文件中：

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

2) 将我想加载的 haml-js 源代码和模板添加到我的资产文件中： javascripts: core: - public/javascripts/vendor/haml.js 模板: - app/views/events/_form.haml.jst

3) Make sure I was loading both core and templates in my application.html.erb

3）确保我在 application.html.erb 中加载了核心和模板

<%= include_javascripts :core, :templates %>

<%= 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.

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'] —— 即当您开始使用最初的几个模板时，很容易忘记。

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.

一切都很好。我不确定为什么 Craig 需要定义一个函数——我只是使用了 haml.js 提供的默认 Haml 函数，但也许我遗漏了一些东西。

回答by Jordan Feldstein

Looks like https://github.com/netzpirat/haml_coffee_assetsgives you what you want. (window.JSTtemplates, written in HAML, with inline coffescript support)

看起来https://github.com/netzpirat/haml_coffee_assets给了你你想要的。（window.JST模板，用 HAML 编写，支持内联 coffescript）

回答by Blaine Hatab

Check out Middleman. It includes haml, sass, coffee, slim, etc. It uses gems like rails does and has a lot of other awesome functionality.

看看中间人。它包括 haml、sass、coffee、slim 等。它使用像 rails 一样的 gems 并且有很多其他很棒的功能。

http://middlemanapp.com/

http://middlemanapp.com/

They even have a custom extension for backbone, https://github.com/middleman/middleman-backbone

他们甚至有一个自定义的主干扩展， https://github.com/middleman/middleman-backbone

It also allows you to build it into static html, css, and js for super fast loading.

它还允许您将其构建为静态 html、css 和 js，以实现超快速加载。

回答by J. Michael Wilson

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

你可以试试 Express with Jade（类似 Haml 的模板）。Express 建立在 Connect 上，用于路由静态文件。Jade 是我在 Node.js 中尝试过的更快的模板引擎之一

http://expressjs.com/

http://expressjs.com/