我喜欢Jade模板引擎在Node.js中类似于HAML的语法，并且希望在Backbone.js客户端中使用它。
我经常看到Backbone使用Underscore.js模板，使用以下样式。
/* Tunes.js */
window.AlbumView = Backbone.View.extend({
initialize: function() {
this.template = _.template($('#album-template').html());
},
// ...
});
/* Index.html */
<script type="text/template" id="album-template"></script>
我想要实现的是一种使用AJAX（或其他方法）获取Jade模板并在当前HTML中渲染它们的方式。
我能够使用jade-browser项目在客户端运行Jade。
与Backbone的集成非常简单：我使用jade.compile()代替_template()。
HTML（脚本和模板）：
<script class="jsbin" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="https://raw.github.com/weepy/jade-browser/master/jade.js"></script>
<script src="https://raw.github.com/weepy/jade-browser/master/jade-shim.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script type="template" id="test">
div.class1
div#id
| inner
div#nav
ul(style='color:red')
li #{item}
li #{item}
li #{item}
li #{item}
script
$('body').append('i am from script in jade')
</script>
JavaScript（与Backbone.View集成）：
var jade = require("jade");
var TestView = Backbone.View.extend({
initialize: function() {
this.template = jade.compile($("#test").text());
},
render: function() {
var html = this.template({ item: 'hello, world'});
$('body').append(html);
}
});
var test = new TestView();
test.render();
这里是代码。
正如@dzejkej上面提到的，使用Jade模板在客户端上最为广泛的方式之一是使用jade-browser；然而，我一直对在浏览器中使用Jade存在一些问题。
Compiling Jade templates速度较慢，这没关系，但是所有的模板都应该被缓存，如果你在客户端缓存它们，每次加载新页面时缓存就会消失（除非使用HTML5持久存储）。文件包含可能很麻烦并且可能会创建过多冗余代码。如果你在浏览器上编译Jade模板并且模板包含include语句，则可能需要做一些额外的工作才能使它们正确编译。此外，如果您决定在服务器上编译并向客户端发送JavaScript，则仍然存在问题。每当Jade模板使用文件包含时，编译后的Jade模板可能会变得非常大，因为它们包含了重复的代码。例如，如果您一遍又一遍地包含同一文件，则该文件的内容将被下载到浏览器中多次，这将浪费带宽。缺乏支持- Jade默认提供了很少的客户端模板支持。是的，你可以使用{client:true}编译器选项，但编译后的模板真的没有针对客户端进行优化，并且此外也没有机制将编译后的Jade模板提供给浏览器。new JadeAsset({
url: '/templates.js',
dirname: __dirname + '/templates'
});
templates/
navbar.jade
user.jade
footer.jade
$('body').append(Templates.navbar());
$('body').append(Templates.user({name: 'mike', occupation: 'sailor'});
$('body').append(Templates.footer());
index.js 并将其添加到你的 lib 中。 - Cole Lawrence你可能无法完全发挥Jade模板的全部功能，但是你可以通过一些技巧来使jade正确输出underscore模板。关键在于防止jade使用!运算符转义<%>标签，方法如下：
script#dieTemplate(type='text/template')
.die(class!='value-<%= value %>')
i.fa.fa-circle
i.fa.fa-circle
i.fa.fa-circle
i.fa.fa-circle
i.fa.fa-circle
i.fa.fa-circle
i.fa.fa-star
{client: true}编译 jade 到 js 模板函数。虽然它不是 AJAX 获取，但听起来它可能可以满足您的需求。 - samjade编译器可以使用--client选项将模板编译为客户端JS。但是，在渲染这些模板之前，您必须先包含Jade运行时。还有另一个项目clientjade，可以使这个过程更加简单。 - mpen