在Backbone.js中使用Jade模板

Question

我喜欢Node.js中Jade模板引擎的类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"> 
    <span class="album-title"><%= title %></span> 
    <span class="artist-name"><%= artist %></span> 
    <ol class="tracks"> 
    <% _.each(tracks, function(track) { %> 
     <li><%= track.title %></li> 
    <% }); %> 
    </ol> 
</script> 

我想看到的是使用AJAX（或其他方法）来获取Jade模板并在当前HTML中呈现它们的方法。

Answer 1

我能够使用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(); 

HERE是代码。

Answer 2

正如上面提到的@dzejkej，在客户端上使用Jade模板的最有名的方法之一是使用翡翠浏览器;不过，我一直在浏览器中使用Jade的几个问题。

• 编译玉模板是慢 - 这是好的，但实际上，所有的模板应该被缓存，并且如果缓存它们的客户端上，他们随时加载新的页面，缓存消失（除非使用HTML5持久性存储，例如）。
• 文件包括可能是一种痛苦，并可能造成过度膨胀。如果您正在浏览器上编译Jade模板，并且该模板包含include语句，则可能需要做一些额外的工作才能正确编译它们。另外，如果您决定在服务器上编译并向客户端发送JavaScript，那么您仍然有问题。每当Jade模板使用文件包含时，您编译的Jade模板会变得相当大，因为它们一遍又一遍地包含相同的代码。例如，如果您一次又一次地包含相同的文件，那么该文件的内容将被多次下载到浏览器，这会浪费带宽。
• 缺乏支持 - Jade几乎不提供对客户端模板的支持。是的，您可以使用{client: true}编译器选项，但编译后的模板实际上并未针对客户端进行优化，此外，没有任何机制可以将已编译的Jade模板提供给浏览器。

这些是我创建Blade project的一些原因。 Blade是一种类似Jade的模板语言，可立即支持客户端模板。它甚至附带快递middleware designed for serving compiled templates to the browser。如果你对你的项目可以使用类似Jade的替代方案，那么查看它！

• https://github.com/bminer/node-blade
• https://github.com/bminer/node-blade#blademiddlewaresourcepath-options
• https://github.com/bminer/node-blade#browser-usage

Answer 3

我只是开源了一个的NodeJS项目，被称为 “资产架”，可以可以预编译玉模板，并在浏览器中的JavaScript为他们提供功能。

这意味着渲染速度非常快，甚至比微模板更快，因为浏览器中没有编译步骤。

这个架构与你提到的有点不同，只是一个名为“templates.js”的模板或任何你想要的js文件。

你可以看看这里，https://github.com/techpines/asset-rack#jadeasset

首先，你将它设置在服务器上，如下所示：

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()); 

无论如何，希望有所帮助。

Answer 4

您也可以在浏览器中检查我的新图书馆是否有玉器。它就像<翡翠> ... < /玉>一样简单。 https://github.com/charlieamer/jade-query

Answer 5

你不会得到玉模板的全部功能，但你可以破解了一点得到玉正常输出下划线的模板，关键是防止玉器与!运营商逃避<%>标签，像这样：

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