クライアント側+サーバー側のテンプレートは、私に間違っている、どのように最適化する感じですか？

Question

私が作成しているWebアプリケーションでは、クライアントExpressページをレンダリングするために古典的なExpress + Jadeを使用し、いくつかのREST APIを公開します（「ユーザーリストAPI」としましょう）。

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

2つのテンプレートエンジンを使用してコードを2回解析して、それを改善する方法はちょっと汚いようです。

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

UPDATE：ヒスイサーバーの両方とクライアント側を使用することは良いアイデアですが、区切る方法を指定/？レンダリングされたテンプレートの一部は、ページを提供するときに、クライアントがどの部分を使用するのかによって行われるべきですか？

Answer 1

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

質問はクライアント側でどのようにレンダリングするのですか？

今すぐクライアント側jade.jsが必要です。

本書フォロー：https://github.com/visionmedia/jade#readme

まず

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

セカンド

$ 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. 

サード

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 

で出力結果を見ることができ、このデモを読んだ後、私はあなたがコンパイルした1理解できるside.Ifヒスイサーバ側とクライアントを区切るする方法を知っているだろうと思いますすべての質問は簡単です。

多分、別の質問が出るかもしれません。* 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); 

Answer 2

クライアント側とサーバー側の両方で動作するhttp://github.com/flatiron/platesテンプレートエンジンを使用してください。

Answer 3

数週間前、Handlebarsテンプレートのnpmパッケージを作成して、クライアントとサーバーの間でそれらを共有しました。それはかなり基本的だが、それは今のところ私のために本当によく働いています：

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

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