web-dev-qa-db-ja.com

Backbone.jsでJadeテンプレートを使用する

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内でレンダリングする方法です。

javascriptbackbone.jspugunderscore.js
24
Josh Smith

jade-browser projectを使用して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 [〜＃〜]はコードです。

23
kubetz

上記の@dzejkejのように、クライアントでJadeテンプレートを使用する最もよく知られている方法の1つは、jade-browserを使用することです。ただし、ブラウザのJadeには常にいくつかの問題があります。

  • Jadeテンプレートのコンパイルは遅い-これは問題ありませんが、実際には、すべてのテンプレートをキャッシュする必要があります。クライアントにキャッシュすると、ロードされるたびに新しいページでは、キャッシュが消えます（たとえば、HTML5永続ストレージを使用している場合を除く）。
  • ファイルのインクルードは苦痛であり、過剰な膨張を引き起こす可能性があります。ブラウザでJadeテンプレートをコンパイルしていて、テンプレートにincludeステートメントが含まれている場合、正しくコンパイルするには、追加の作業が必要になる場合があります。さらに、サーバーでコンパイルしてJavaScriptをクライアントに送信することにした場合でも、問題が発生します。 Jadeテンプレートがファイルインクルードを使用する場合は常に、コンパイルされたJadeテンプレートは同じコードを何度も含むため、かなり大きくなる可能性があります。たとえば、同じファイルを何度も含めると、そのファイルのコンテンツがブラウザに数回ダウンロードされるため、帯域幅が無駄になります。
  • サポートの欠如-Jadeは、すぐに使用できるクライアント側テンプレートのサポートをほとんど提供していません。はい、{client: true}コンパイラオプションを使用できますが、コンパイルされたテンプレートは実際にはクライアント用に最適化されておらず、さらに、コンパイルされたJadeテンプレートをブラウザに提供するメカニズムはありません。

これらは私が ブレードプロジェクト を作成した理由のいくつかです。 Bladeは、Jadeのようなテンプレート言語であり、クライアント側のテンプレートをすぐにサポートします。 Express コンパイルされたテンプレートをブラウザに提供するために設計されたミドルウェア にも同梱されています。プロジェクトの翡翠のような代替案で大丈夫なら、それをチェックしてください！

14
BMiner

「asset-rack」と呼ばれるnodejsプロジェクトをオープンソース化しました。これは、jadeテンプレートをプリコンパイルして、ブラウザーでjavascript関数として提供できます。

これは、ブラウザにコンパイル手順がないため、レンダリングが非常に高速で、マイクロテンプレートよりもさらに高速であることを意味します。

アーキテクチャはあなたが言及したものとは少し異なり、「templates.js」と呼ばれるすべてのテンプレートまたはあなたが望むもののためのただ1つの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());

とにかく、それが役立つことを願っています。

4
Brad C

Jadeテンプレートのすべての機能を利用することはできませんが、can少しハックして、Jadeにアンダースコアテンプレートを適切に出力させることができます。重要なのは、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
0
DigitalDesignDj

また、ブラウザ内の翡翠の新しいライブラリをチェックアウトすることもできます。 <jade> ... </ jade>と同じくらい簡単です。 https://github.com/charlieamer/jade-query

0
charlieamer