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

进入Backbone.js来构build我的项目的JavaScript代码,我喜欢HAML模板在后端(导轨),所以我喜欢用它来为Backbone Views模板。 我知道有几个HAML端口的JavaScript,如https://github.com/creationix/haml-js和骨干支持JST和胡子轻松。

什么是最好的方式来使用哈姆模板,而不是。

在客户端使用HAML有什么缺点吗? 性能,额外的脚本加载时间(通过像jammit这样的资产包装工具来处理)

我知道你已经提到过,但我会build议与Jammit一起使用haml-js。 只需在您的javascripts和您的assets.yml文件中添加haml.js添加template_function: Haml以及将您的模板文件包含到一个包中即可。 例如

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

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

要使用这些模板,只需调用Jammit创build的JST之一即可。 即

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

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

注意:一定要在你的Gemfile中指向Jammit的github repo来获取支持haml-js工作所必需的换行符的最新版本。

我准备给哈姆咖啡一个镜头。 (没有双关的意思)我不能唱咖啡的赞美足够; 再加上它现在在Rails 3.1中是默认的。 现在,我可以在我最喜欢的模板语言中embedded咖啡文本,并预先编译这些内容。

哦,现在快乐起来吧。

我知道这会有所回避的问题,但在这里我们去:)

我的rails应用程序使用haml来处理后端的所有视图。 太棒了。 由于某些原因(主要是i18n),我不喜欢在客户端使用模板。 这是我如何做到的:

  • 在ruby haml中创build所有模板,并将其存储到脚本标签中,使用时髦types(我使用text / js-template)。 这将创buildprerendered的HTML,你可以与jQuery和骨干玩。
  • 当您创build主干视图时,加载存储的模板并将其附加到文档中
  • 通过改变预先存在的模板来渲染你的视图

你只处理HTML和jQuery是很棒的。 对于一些不需要i18​​n的视图,我使用下划线模板,因为它已经在那里了。

至于哈姆模板性能,似乎胡子和车把速度更快。

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

这些都是为问题提供解决scheme的坚实gem,每个都有一定的权衡。 例如,Haml-js需要渲染模板客户端(没有什么错,这只是一个折衷)。 Hamlbars和haml_assets都插入到资产pipe道中,但是因为它们存在于请求对象之外,所以一些帮助器将不起作用。 两者都做了一些调整,包括URL助手和ActionView助手,但不要指望具有相同的function,在视图中编写haml。

我的方法有点笨重(我打算把它放到一个引擎中),但是它工作的很好,很容易复制。 它尽可能地使用了haml_assets,但是回到了使用“show”操作从“模板”控制器提供模板

  • 把你的意见放在view / templates /目录下
  • 您可以添加将此视图呈现为JST函数的布局
  • 您可以指定show操作来返回“application / javascript”作为其内容types
  • 编写模板时,您可以访问所有帮助程序
  • 您可以为“/ template / whatever”添加脚本标记来呈现任何模板,或者使用路线通配来获得更好的组织视图。

这种方法的好处是,因为您的视图可以从控制器访问,您可以select将它们呈现为jst模板(通过模板控制器)或通过其他控制器作为部分。 这将允许你直接从url(比如/ products / widgets / super-cool-widget)提供友好的页面,用户可以获得caching的模板/模板/小部件/超酷小部件。

我无法在Craig的主题上回答(我想我需要某种声望来发performance有的答案),但是你不再需要用jamml来使用haml-js – 提交成功jammit的主要分支。 详情请看这里: https : //github.com/documentcloud/jammit/commit/b52e429f99cac3cd1aa2bf3ab95f1bfaf478d50d

编辑:最后的gem版本是在1月份,而提交是在3月份添加的,所以你需要设置捆绑器来运行github回购或在本地构build。 如果你不使用jammit头,你将无法正确parsing模板,因为换行符被剥离。

我需要做的一切就是:

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

template_function:“Haml”

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

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

<%= include_javascripts:core,:templates%>

4)通过JST [filename](即JST ['_ form'])在我的源文件中访问模板。 值得一提的一个问题 – jammit会查看所有的模板,并命名空间到公共path,所以如果你有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函数,但也许我错过了一些东西。

看起来像https://github.com/netzpirat/haml_coffee_assets给你你想要的。; ( window.JST模板,用HAML编写,内嵌coffescript支持)

看看Middleman。 它包括haml,sass,咖啡,slim等等。它使用像rails这样的gems,并且有很多其他很棒的function。

http://middlemanapp.com/

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

它也允许你将它构build成静态的html,css和js来实现超快速加载。

你可以试试用Jade(类似Haml的模板)。 Express构build在Connect上,用于路由静态文件。 Jade是我用Node.js试过的更快的模板引擎之一

http://expressjs.com/