在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