ホームページ  >  記事  >  ウェブフロントエンド  >  Node.js での EJS テンプレートの使用に関するチュートリアル

Node.js での EJS テンプレートの使用に関するチュートリアル

零下一度
零下一度オリジナル
2017-05-09 10:08:521045ブラウズ

この記事は主に EJS テンプレートのクイックスタート学習を紹介しています。編集者が非常に優れていると考えたので、参考として共有します。エディターをフォローして見てみましょう。Node オープンソース テンプレートには多くの選択肢がありますが、

Class

ic ASP/PHP/JSP の経験がある場合は、EJS を使用することをお勧めします。当然、EJS を使用できます。つまり、最も伝統的な方法である d85c79a929bc8ca626621b97151165d7 を使用して、JavaScript コードを 9613d184b92a8db8e14f8dcd66cf91f2 ブロック内に配置できます。追加 211d170dd2338981536b694e744db878" js ロジック コードが含まれています。 8b95f35e5e88078811040fade31b8cf7" には、php の

echo の関数と同様に、直接出力するための変数が含まれています。 "p" は、以下の build メソッドを呼び出すときの k-v オブジェクトのパラメーターです。また、"new JTemp" を呼び出すときに別のパラメーター名に設定することもできます。
Call:

<html> 
 <head> 
  <script src="../ejs.js"></script> 
  <script id="users" type="text/template"> 
   <% if (names.length) { %> 
    <ul> 
     <% names.forEach(function(name){ %> 
      <li><%= name %></li> 
     <% }) %> 
    </ul> 
   <% } %> 
  </script> 
  <script> 
   onload = function(){ 
    var users = document.getElementById(&#39;users&#39;).innerHTML; 
    var names = [&#39;loki&#39;, &#39;tobi&#39;, &#39;jane&#39;]; 
    var html = ejs.render(users, { names: names }); 
    document.body.innerHTML = html; 
   } 
  </script> 
 </head> 
 <body> 
 </body> 
</html>

上記の temp が生成された後、build メソッドは複数回呼び出される場合は、HTML が生成されます。以下はテンプレート エンジンのコードです:

<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){=%> class="first"<%=}=%>><%==stu.name=%></td> 
    <td><%==stu.age=%></td> 
    <td><%==(stu.address || &#39;&#39;)=%></td> 
  <tr> 
  
<%= 
  } 
=%> 
</script>

中心となるのは、テンプレート コードを文字列を結合する関数に変換し、データを取得するたびにこの関数を呼び出すことです。 主に携帯電話(Webkit)で使用されるため、文字列結合の効率は考慮されていません。IEで使用する必要がある場合は、文字列結合メソッドをArray.push()に変更するのが最善です。

添付: connect + ejs の例。

$(function(){ 
  var temp = new JTemp(&#39;test_list&#39;), 
    html = temp.build( 
      {list:[ 
          {name:&#39;张三&#39;, age:13, address:&#39;北京&#39;}, 
        {name:&#39;李四&#39;, age:17, address:&#39;天津&#39;}, 
        {name:&#39;王五&#39;, age:13} 
      ]}); 
  $(&#39;table&#39;).html(html); 
});

【関連おすすめ】

1.

無料のjsオンラインビデオチュートリアル
2.

JavaScript中国語リファレンスマニュアル

3.

php.cn Dugu Jiijian (3) - JavaScriptビデオチュートリアル

以上がNode.js での EJS テンプレートの使用に関するチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。