Question

我进入Backbone.js为我的项目构建javascript代码，我喜欢HAML在后端（rails）进行模板化，所以我喜欢用它来进行Backbone Views模板化。我知道Javascript有几个HAML端口，比如 https://github.com/creationix/haml-js和骨干网轻松支持JST和小胡子。

最好的方法是使用haml模板。

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

Answer 1

我知道你已经提到了它，但我建议将haml-js与Jammit一起使用。只需在javascripts和assets.yml中添加haml.js即可添加template_function: Haml以及将模板文件包含在包中。 e.g。

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

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

这样的javascript文件

要使用这些模板，只需调用其中一个JST创建的Jammit。即。

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

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

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

Answer 2

我准备给haml-coffee一个机会。（没有双关语）我不能赞美咖啡的赞美;加上它现在是Rails 3.1中的默认值。现在我可以在我最喜欢的模板语言中嵌入coffeescript，并预编译该批次。

哦，快乐..现在让它发挥作用。

Answer 3

我知道这有点绕过这个问题，但我们走了：）

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

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

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

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

Answer 4

我一直在研究Rails 3 / Backbone应用程序，并在评估hamlbars，haml_assets和玩haml-js之后采取了不同的方法。

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

我的方法有点笨重（我打算将它放入引擎中）但它运行良好且易于复制。它尽可能使用haml_assets，但是使用“show”操作从“模板”控制器返回服务模板

将您的观点放在view / templates /目录中
您可以添加将此视图呈现为JST函数的布局
您可以指定show action以返回“application / javascript”作为其内容类型
编写模板时可以访问所有帮助者
您可以为“/ template / whatever”添加脚本标记，这些标记将呈现任何模板，或者使用路径通配以获得更好的组织视图。

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

Answer 5

我不能回答Craig的帖子内线（我猜我需要某种声誉来发布现有的答案），但你不再需要抓住一个使用haml-js的jammit - 提交使它成为jammit的主要分支。有关详细信息，请参阅此处：https://github.com/documentcloud/jammit/commit/b52e429f99cac3cd1aa2bf3ab95f1bfaf478d50d

编辑：最后一个gem发布是在Jan，并且提交是在3月份添加的，所以你需要设置bundler来对抗github repo或在本地构建它。如果你不使用HEAD of jammit，那么你将无法正确解析模板，因为新线被剥离了。

我需要做的就是：

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

template_function：“Haml”

2）添加我想加载到资产文件的haml-js源代码和模板： JavaScript的：核心： - public / javascripts / vendor / haml.js 模板： - app / views / events / _form.haml.jst

3）确保我在application.html.erb

中加载了核心和模板

＆lt;％= include_javascripts：core，：templates％＆gt;

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函数，但也许我错过了一些东西。

Answer 6

看起来https://github.com/netzpirat/haml_coffee_assets可以为您提供所需内容。（window.JST模板，用HAML编写，内联coffescript支持）

Answer 7

查看中间人。它包括haml，sass，coffee，slim等。它使用像rails这样的宝石，还有很多其他很棒的功能。

http://middlemanapp.com/

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

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

Answer 8

您可以尝试使用Express with Jade（类似Haml的模板）。 Express基于Connect构建路由静态文件。 Jade是我用Node.js试过的速度更快的模板引擎之一

http://expressjs.com/

与Backbone.js一起使用HAML模板的最佳策略

8 个答案: