6

私が作成しているWebアプリでは、従来のExpress + Jadeを使用してクライアントページをレンダリングし、REST API（たとえば、「ユーザーリストAPI」）を公開しています。

これらのクライアントページは、提供されたAPIを使用して「ユーザーリスト」を取得し、表示します。それを表示するには、データが取得されたらハンドルバーテンプレートライブラリを使用します。

2つのテンプレートエンジンを使用し、コードを2回解析しているので、少し汚いようですが、どうすれば改善できますか？

注：スクリプト変数を挿入してクライアントページ内に初期データを送信することで、すでに最適化しています。この変数は、APIが受信するデータと同じように表示されます。APIは、データ更新の場合にのみ使用されます。

更新：サーバー側とクライアント側の両方でjadeを使用することは良い考えですが、どのように分離/指定するのですか？レンダリングされたテンプレートのどの部分がページを提供するときに実行する必要があり、どの部分がクライアントによって使用されますか？

4

3 に答える 3

4

これは、クライアント側とサーバー側のテンプレートを使用するのは非常に簡単です。いくつかのWebアプリを構築するときは、ajaxを使用してデータを取得し、コールバック関数を使用して処理する必要があります。したがって、これらのデータをクライアント側でレンダリングする必要があります。

問題は、クライアント側でそれらをどのようにレンダリングするかです。

これで、クライアント側のjade.jsが必要になります。

このドキュメントに従ってください： https ：//github.com/visionmedia/jade#readme

初め

git clone https://github.com/visionmedia/jade.git

2番 

$ make jade.js ( in fact the project has already compile the file for us )

so we just need to copy this file to the path that we use.

第3

read my demo below :

<script type='text/javascript' language='javascript' src="lib/jquery-1.8.2.min.js"></script>
<script type='text/javascript' language='javascript' src="lib/jade/jade.js"></script>
<script type='template' id='test'>
ul
  li hello world 
  li #{item}
  li #{item}
  li #{item}
</script>
<script>
  var compileText = $("#test").text();
  console.log( typeof( compileText ) );
  var fn = jade.compile( compileText , { layout : false } );
  var out = fn( {item : "this is item " } );
  console.log( out );
  $("body").append( out );
</script>

これで、出力結果を本文で確認できます。

hello world
this is item
this is item
this is item

このデモを読んだ後、jadeサーバー側とクライアント側を分離する方法を知っていると思います。どちらがjadeテンプレートをコンパイルするかを理解できれば、すべての質問は簡単です。

* .jadeでいくつかのjadeテンプレートコードを書く方法は？このドキュメントはそれを行う方法も提供します。このチュートリアルはあなたを助けるかもしれません。

index.jade

!!!5
html
  head
   title hello world
  body
    ul#list

    script#list-template(type='template')
      |- for( var i in data )
      |    li(class='list') \#{ data[i].name }
      |- }

index.js

/* you javascript code */
var compileText = $('#list-template').text();
var compile = jade.compile( compileText , { layout : false } );

var data = [{ "name" : "Ben" } , {"name" : "Jack" } , {"name" : "Rose" }];
var outputText = compile( data );

$("#list").append( outputText );
于 2012-12-19T07:12:00.170 に答える
1

クライアント側とサーバー側の両方で機能するhttp://github.com/flatiron/platesテンプレートエンジンを使用します。

于 2012-04-17T09:55:52.633 に答える
1

数週間前、Handlebarsテンプレートをクライアントとサーバー間で共有するためのnpmパッケージを作成しました。これはかなり基本的なことですが、これまでのところ、私にとっては非常にうまく機能しています。

https://github.com/jwietelmann/node-handlebars-precompiler

編集：サーバー側レンダリングのパッケージとして「hbs」を個別に使用しています。プリコンパイラは、hbsビューを更新するたびに、プリコンパイルされたテンプレートをパブリックjavascriptsディレクトリに配信するだけです。

于 2012-04-23T20:56:03.263 に答える