Posted at

ExpressからJadeに渡したObjectをeachで使用する

More than 1 year has passed since last update.

ExpressのテンプレートエンジンをJadeで使用した際につまったので記載。

違いがわからないので、ご指摘いただければありがたいです。


詰まったところ

jadeを学習にあたって、以下の記事を参考にさせていただいた。

https://gist.github.com/japboy/5402844

http://qiita.com/sasaplus1/items/189560f80cf337d40fdf

each構文を使用する際に、jadeファイルの中で連想配列を書くのではなく、Expressから連想配列を渡した際にeach構文がコンパイルエラーになった。


index.js

/*jade練習用のオブジェクト */

var package = {
title: '最高にクールなホームページ',
description: '最高にクールなホームページです。見ないと損です。',
keywords: [
'最高',
'クール',
'世界一',
'天才'
],
robots: [
'INDEX',
'FOLLOW',
'NOODP',
'NOYDIR',
'NOARCHIVE'
]
};

/*jade練習用のページ */
router.get('/practicejade', function(req, res, next) {
res.render('practicejade',{package:package});
});


practice.jade(修正前)

以下は、コンパイルエラーとなる。

doctype html

html
head
meta(charset='UTF-8')
title 最高にクールなホームページ
link(rel='stylesheet', href='./css/app.css')
body
h1 最高にクールなホームページ
p 最高にクールなホームページへようこそ。
ul
each val,key in #{package}
li= key + ':' + val

下記のように修正すると問題なく参照できた。

doctype html

html
head
meta(charset='UTF-8')
title 最高にクールなホームページ
link(rel='stylesheet', href='./css/app.css')
body
h1 最高にクールなホームページ
p 最高にクールなホームページへようこそ。
ul
//inに直接オブジェクトを記載すると、コンパイルエラーになる。
一旦、変数として定義してあげると問題ない。
each val,key in #{package}
li= key + ':' + val

-var hoge = package
each val,key in hoge
li= key + ':' + val