slowjet

is a part of a carburetor

テンプレートエンジンにjqtplを使ってみる

出来たけど色々理解できてない。あと本家のjQuery Templatesは開発が終わってJsRenderになるらしい。でもjqtplは使いやすいし、フロントと書き方も同じにできるからとりあえずjqtplでいいかな的な。

jqtplの使い方の基礎

app.js ではapp.set('view engine', 'html')でテンプレートエンジンを指定できる?app.register('.html', require('jqtpl').express)でHTMLファイルをjqtplのファイルとして扱うとしてる?

registerしたら、res.render()でテンプレが使える。最初の引数にテンプレートファイルを指定するけど、".html"はregisterで指定してるから省略できる。デフォルトで(?)テンプレートファイルはviewsディレクトリに配置したものを使う。render()メソッドの2つめの引数でハッシュを渡してテンプレートで展開する。

// [app.js]
var express = require('express')
  , app = express.createServer();

app.set('view engine', 'html');
app.register('.html', require('jqtpl').express);
// ここ理解する

app.get('/', function(req, res) {
    // / にアクセスしたときは
    // views/index.html のテンプレ
    res.render('index', {
        title: 'Node sample'
    })
});

app.get('/about', function(req, res) {
    // /about にアクセスしたときは
    // views/about.html のテンプレ
    res.render('about', {
        title: 'About',
        author: '5509',
        hogehoge: 'fungaaaaaaaaaaaaa'
    });
});
    
app.listen(5509);

テンプレートの書き方

テンプレートファイルはviewsディレクトリに配置する。書き方はjqtplと一緒なのでらくらく。

// [views/index.html]
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>${title}</title>
</head>
<body>
</body>
</html>
// [views/about.html]
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>${title}</title>
</head>
<body>
<h1>${title}</h1>
<dl>
    <dt>Author</dt>
    <dd>${author}</dd>
    <dt>Hogehoge</dt>
    <dd>${hogehoge}</dd>
</dl>
</body>
</html>