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

  • 0
    いいね
  • 0
    コメント

    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