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> 

はジェイドテンプレートを取得し、現在のHTML内でそれらをレンダリングするAJAX（またはいくつかの他の方法）を使用する方法です。

Answer 1

jade-browserプロジェクトを使用してJadeクライアント側を実行することができました。

バックボーンとの統合は簡単です：_template()の代わりにjade.compile()を使用しています。

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テンプレートを使用する最もよく知られている方法の1つは、jade-browserを使用することです。しかし、私はいつもブラウザでJadeにいくつかの問題がありました。 HTML5を使用していない限り大丈夫ですが、実際には、すべてのテンプレートがキャッシュされるべき、とあなたは、クライアント上では、新しいページをロードし、いつでもそれらをキャッシュする場合、キャッシュが消失する（ - ジェイドテンプレートをコンパイル

• は遅いですたとえば、永続ストレージ）。
• ファイルには痛みがあり、過度の鼓脹を生じることがあります。ブラウザでJadeテンプレートをコンパイルしていて、テンプレートにinclude文が含まれている場合、正しくコンパイルするには余分な作業が必要な場合があります。さらに、サーバー上でコンパイルしてJavaScriptをクライアントに送信することに決めた場合でも、それでも問題はあります。 Jadeテンプレートがファイルインクルードを使用するたびに、コンパイルされたJadeテンプレートは、同じコードを何度も繰り返しているため、かなり大きくなる可能性があります。たとえば、同じファイルを何度も繰り返して含めると、そのファイルの内容がブラウザに数回ダウンロードされ、帯域幅が無駄になります。
• サポートの不足 - Jadeは、クライアントサイドのテンプレートをほとんどサポートしていません。はい、{client: true}コンパイラオプションを使用できますが、コンパイルされたテンプレートは実際にはクライアント用に最適化されていません。また、コンパイル済みのJadeテンプレートをブラウザに提供するメカニズムはありません。

これは私がBlade projectを作成した理由のいくつかです。 Bladeは、すぐにすぐにクライアント側のテンプレートをサポートする玉のようなテンプレート言語です。 Express middleware designed for serving compiled templates to the browserが付属しています。あなたのプロジェクトに玉のような選択肢があればOKです！

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

Answer 3

私はちょうど開いたヒスイのテンプレートをプリコンパイルし、JavaScriptなどのブラウザでそれらを提供することができ、 "資産・ラック" と呼ばれるnodejsプロジェクトを、ソース化機能。

これは、ブラウザにコンパイルのステップがないため、レンダリングが驚異的に高速で、マイクロテンプレートより高速であることを意味します。

アーキテクチャーは、あなたが言及しているものと少し異なります。「templates.js」と呼ばれるすべてのテンプレート用の1つのjsファイル、

あなたがここでそれをチェックアウトすることができ、https://github.com/techpines/asset-rack#jadeasset

まず、次のようにサーバー上でそれを設定：次に

templates/ 
    navbar.jade 
    user.jade 
    footer.jade 

：

new JadeAsset({ 
    url: '/templates.js', 
    dirname: __dirname + '/templates' 
}); 

をテンプレートディレクトリはこのように見えたあなたの場合すべてのテンプレートがブラウザの変数「テンプレート」で表示されます：

$('body').append(Templates.navbar()); 
$('body').append(Templates.user({name: 'mike', occupation: 'sailor'}); 
$('body').append(Templates.footer()); 

とにかく、役立つことを望みます。

Answer 4

また、私の新しい図書館ではブラウザ内の翡翠についてチェックアウトすることもできます。 < jade> ... </jade>と同じくらい簡単です。 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