テンプレートエンジンに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>