ノードオープンソーステンプレートには多くのオプションがありますが、私のような高齢者がEJを使用することをお勧めします。古典的なASP/PHP/JSPの経験を持つEJを使用するのは自然です。つまり、JavaScriptコードを<%...%>ブロックに配置し、最も従来の方法で<%=出力変数%>を使用できます(さらに、<% - 出力変数は&などのシンボルをエスケープしません)。 EJSインストールコマンドは次のとおりです。
npmインストールejs
JSコール
JSによって呼ばれる2つの主要な方法があります。
ejs.compile(str、options); // => function ejs.render(str、options); // => str
実際、EJSはExpressから独立して使用できます。たとえば、:
var ejs = require( '')、str = require( 'fs')。readfilesync(__ dirname + '/list.ejs'、 'utf8'); var ret = ejs.render(str、{names:['foo'、 'bar'、 'baz']}); console.log(ret); ejs.render()を参照してください。最初のパラメーターはテンプレートの文字列であり、テンプレートは次のとおりです。 <%if(names.length){%> <ul> <%names.foreach(function(name){%> <li foo = '<%= name + "'"%> '> <%= name%> </li> <%})</ul> <%}%>名前はローカル変数になります。
オプションパラメーター
2番目のパラメーターはデータであり、通常はオブジェクトです。このオブジェクトはオプションと見なすことができます。つまり、データと選択は同じオブジェクト上にあります。
毎回ディスクを持ちたくない場合は、テンプレートをキャッシュしてoptions.fileNameを設定する必要があります。例えば:
var ejs = require( '../')、fs = require( 'fs')、path = __dirname + '/functions.ejs'、str = fs.readfilesync(path、 'utf8'); var users = []; users.push({name: 'tobi'、age:2、種: 'ferret'})users.push({name: 'loki'、age:2、種: 'ferret'})users.push({name: 'jane'、age:6、種: 'ferret'}) console.log(ret);Conculdeコマンド
そして、あなたがしたいなら
<ul> <%users.foreach(function(user){%> <%include user/show%> <%})%> </ul>一般に、共通のテンプレートを挿入する、つまりファイルを導入するには、filenameオプションを設定してinclude機能を起動する必要があります。
テンプレート:
<h1> users </h1> <%function user(user){%> <li> <light> <%= user.name%> </strong>は<%= user.age%> year <%= user.species%>。</li> <%}EJSはテンプレートのコンパイルをサポートしています。テンプレートコンパイルの後、IO操作はありません。非常に高速で、ローカル変数に使用できます。次の例ユーザー/showは、EJS拡張機能を無視します。
<ul> <%users.foreach(function(user){%> <%include user/show%> <%})%> </ul>カスタムトークン
<h1> {{= title}} </h1>一般的に非<%%>タグを使用する場合は、カスタマイズすることもできます。
var ejs = require( 'ejs'); ejs.open = '{'; ejs.close = '}}';フォーマット出力も問題ありません。 ejs.filters.last = function(obj){return obj [obj.length -1]; };呼びかけ:<p> <%=:ユーザー|最後の%> </p>EJSはブラウザ環境もサポートしています。
<html> <head> <スクリプトsrc = "../ ejs.js"> </script> <script id = "users" type = "text/template"> <%if(names.length){names.length){name(name){name){%> <li> <%= name%> </li < function(){var users = document.getElementById( 'users')。innerhtml; var names = ['loki'、 'tobi'、 'jane']; var html = ejs.render(users、{names:names}); document.body.innerhtml = html; } </script> </head> <body> </body> </html> EJSがマルチレイヤーJSONオブジェクトを出力できるのだろうか?ちなみに、一部のネチズンは、JQマスタージョンが数年前に20行のテンプレートを書いたことを明らかにしました。
シンプルで実用的なJSテンプレートエンジン
50行未満のJSテンプレートエンジンは、さまざまなJS構文をサポートしています。
<script id = "test_list" type = "text/html"> <%= for(var i = 0、l = p.list.length; i <l; i ++){var stu = p.list [i]; =%> <tr> <td <%= if(i == 0){=%> <%=} =%>> <%== stu.name =%> </td> <td> <%== stu.age =%> </td> <td> <%===(stu.address || ')= </td> </> <「<%= xxx =%>」はJSロジックコードであり、「<%== xxx =%>」は、PHPのエコーの関数と同様の直接出力変数です。 「P」は、次のビルドメソッドを呼び出すときのKVオブジェクトパラメーターです。 「新しいJTEMP」と呼ぶときに別のパラメーター名に設定することもできます
呼びかけ:
$(function(){var temp = new jtemp( 'test_list')、html = temp.build({name: 'zhang san'、age:13、address: 'beijing'}、{name: 'li si'、age:17、address: 'tianjin'}、{name: 'wang wu n'} $( 'table')。html(html);上記の温度が生成された後、ビルドメソッドを複数回呼び出してHTMLを生成できます。テンプレートエンジンのコードは次のとおりです。
var jtemp = function(){function temp(htmlid、p){p = p || {}; //構成情報、ほとんどの場合、this.htmlid = htmlid; this.fun; this.oname = p.oname || 'p'; this.temp_s = p.temps || '<%='; this.temp_e = p.tempe || '=%>'; this.getFun(); } temp.prototype = {getFun:function(){var _ = this、str = $( '#' + _.htmlid).html(); if(!str)_.err( 'error:no temp !!'); var str_ = 'var' + _.oname + '= this、f =/'/';'、s = str.indexof(_。temp_s)、e = -1、p、sl = _.temp_s.length、el = _.temp_e.length; for(; s> = 0;){e = str.indexof(_。temp_e); if(e <s)alert( ':(エラー!!'); str_ += 'f +=/' ' +str.substring(0、s) +'/';'; p = _.trim(str.substring(s +sl、e)); P.Substring(1) + ';'; function(p){fun.call(p)、{s)、trim(s);コアは、テンプレートコードを文字列をスプライスする関数に変換し、データコール関数を取得するたびに変換することです。
主に携帯電話(webkit)に使用されているため、弦のスプライシングの効率は考慮されていません。 IEで使用する必要がある場合は、文字列スプライシング方法をarray.push()の形式に変更することをお勧めします。
EJSテンプレートレイアウトレイアウト
1.デフォルトのレイアウトを使用したくない場合は、自分で指定できます。例えば:
res.Render( "index"、{"title": "test"、 "layout": "main"}); // or res.render( "index"、{"title": "test"、 "leaout": "main.ejs"});2.レイアウトを使用したくない場合は、レイアウトをFalseに設定できます。
Res.Render( "index"、{"leaout":false});3.各リクエストを個別に設定したくない場合。グローバル設定を使用できます。
app.set( "view options"、{"layout":false});4。EJSでは、デフォルトのクロージングタグは<%..%>であり、独自のタグを定義することもできます。例えば:
app.set( "view options"、{"open": "{{"、 "close": "}}"});5。ローカルレイアウト
Webアプリケーションでは、各ユーザーのコメントを繰り返し表示する必要があるユーザーコメント機能など、特定のコンテンツを繰り返し表示する必要があることがよくあります。現時点では、ループを通じてそれを実現できます。ただし、[部分テンプレート](部分)を使用して実装することもできます。例えば:
最初に、ローカルテンプレートを作成します。/views/comment.ejs:
<div> <div> <%= comment.user%> </div> <div> <%= comment.content%> </div> </div>
注:ここにcomment.xxxxがあります
次に、./views/index.ejsで、Partialからコメントを呼び出します
これは<%= title%>です! <br/> <% - partial( "コメント"、コメント)%>
注:partial( "comment.ejs"、comments); < - 単語は複数形でなければなりません。
最後に、ルーターでは、index.ejsを呼び出します。
app.get( "/"、function(req、res){res.render( "index"、{"title": "test"、 "layout":false、 "comments":[{"user": "gainover"、 "content": "test1"}、{"user": "zongzi"、 "content": "test2": "''": "" '":" "'" "" '"" "'": "" maoma ]});注:コードのコメントは、index.ejsのコメント変数名と同じです。また、partialによって呼び出されたコメントで、コメントの単数形が使用されます。
リストが表示されると、通常遭遇するシナリオは、最初の要素または最後の要素を特別に表示することです。部分的には、Expressの組み込み変数を使用して、現在のオブジェクトが最初の要素であるか最後の要素であるかを判断できます。
<div> <div> <%= comment.user%> </div>:<div> <%= comment.content%> </div> </div>
このようにして、最初のコメントのクラスには追加のファーストイエントがあります。
同様の内蔵変数には次のものがあります。
(1)Arrayの最初の要素である場合、FirstIncollectionが真実です
(2)インデックスインクレクション配列内の現在の要素のインデックス
(3)最後のインクレクションは、それが配列の最後の要素である場合に真です
(4)CollectionLength
最後に、Partialがテンプレートを呼び出すと、パス検索の問題があります。
(1)Partial( "edit")は、同じディレクトリでedit.ejsファイルを探します。
(2)partial( "../ message")は、前のレベルディレクトリのmessage.ejsファイルを探します。
(3)partial( "users")は、users.ejsファイルを探します。 users.ejsが存在しない場合、 /users/index.ejsファイルが検索されます。
(4)<%= users%>はコンテンツを逃がします。逃げたい場合は、<%-Users%>を使用できます