この記事は主に EJS テンプレートのクイックスタート学習を紹介しています。編集者が非常に優れていると考えたので、参考として共有します。エディターをフォローして見てみましょう。Node オープンソース テンプレートには多くの選択肢がありますが、
Classic ASP/PHP/JSP の経験がある場合は、EJS を使用することをお勧めします。当然、EJS を使用できます。つまり、最も伝統的な方法である <%=output%> を使用して、JavaScript コードを <%...%> ブロック内に配置できます。追加 <%-output 変数は &) などの記号をエスケープしません。 Install EJS コマンドは次のとおりです:
npm install ejs
JS 呼び出す主なメソッドは 2 つあります:
ejs.compile(str, options); // => Function ejs.render(str, options); // => str
var ejs = require('')， str = require('fs').readFileSync(dirname + '/list.ejs', 'utf8');
var ret = ejs.render(str, {
names: ['foo', 'bar', 'baz']
});
console.log(ret);string
で、テンプレートは以下の通りです。<% if (names.length) { %>
<ul>
<% names.forEach(function(name){ %>
<li foo='<%= name + "'" %>'><%= name %></li>
<% }) %>
</ul>
<% } %>
オプションパラメータ
2 番目のパラメータはデータで、通常は
オブジェクト
var ejs = require('../')
, fs = require('fs')
, path = dirname + '/functions.ejs'
, str = fs.readFileSync(path, 'utf8');
var users = [];
users.push({ name: 'Tobi', age: 2, species: 'ferret' })
users.push({ name: 'Loki', age: 2, species: 'ferret' })
users.push({ name: 'Jane', age: 6, species: 'ferret' })
var ret = ejs.render(str, {
users: users,
filename: path
});
console.log(ret);そして、必要に応じて
そうだね
テンプレート:
<ul>
<% users.forEach(function(user){ %>
<% include user/show %>
<% }) %>
</ul><h1>Users</h1>
<% function user(user) { %>
<li><strong><%= user.name %></strong> is a <%= user.age %> year old <%= user.species %>.</li>
<% } %>
<ul>
<% users.map(user) %>
</ul>フォーマットされた出力
も利用可能です。<ul>
<% users.forEach(function(user){ %>
<% include user/show %>
<% }) %>
</ul> var ejs = require('ejs');
ejs.open = '{{';
ejs.close = '}}'; ejs.filters.last = function(obj) {
return obj[obj.length - 1];
};EJS は
JSONところで、一部のネチズンは、jQ マスターの John が数年前に 20 行のテンプレートを書いたというニュースを広めましたが、これは EJS に似ていますが、短くて簡潔です。 シンプルで実用的な js 50 行未満の js テンプレート エンジンは、さまざまな js 構文をサポートします:
<p><%=: users | last %></p>
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('users').innerHTML;
var names = ['loki', 'tobi', 'jane'];
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 || '')=%></td>
<tr>
<%=
}
=%>
</script>中心となるのは、テンプレート コードを文字列を結合する関数に変換し、データを取得するたびにこの関数を呼び出すことです。 主に携帯電話(Webkit)で使用されるため、文字列結合の効率は考慮されていません。IEで使用する必要がある場合は、文字列結合メソッドをArray.push()に変更するのが最善です。
添付: connect + ejs の例。$(function(){
var temp = new JTemp('test_list'),
html = temp.build(
{list:[
{name:'张三', age:13, address:'北京'},
{name:'李四', age:17, address:'天津'},
{name:'王五', age:13}
]});
$('table').html(html);
});3.
php.cn Dugu Jiijian (3) - JavaScriptビデオチュートリアル以上がNode.js での EJS テンプレートの使用に関するチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
