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

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