1. ホーム
  2. javascript

[解決済み] 変数付きJadeテンプレート(nodejsサーバーサイド)

2022-02-07 12:52:45

質問

連絡先リストを表示するために、各連絡先のdivをjadeコードに変換しましたが、関連するフィールドにまだ入力する必要があります。サーバーサイドでそれを行うことができますか?私はサーバーコードにnodejsを使用しています。連絡先のjadeテンプレートは以下の通りです。

//  
    img-cont
    .img-cont
      //
        img-cont
      .left-img
        //
          left-img
        .img-box
          img(src='assets/img/img.jpg', alt='')
        .name
          h6
            span John Doe
            img(src='assets/img/star-b.png', alt='')
          p
            strong Phone number:
            | +1 234 567890
          p
            strong Email address:
            a(href='mailto:[email protected]') [email protected]
      //
        left-img
      ul.share-ul
        li
              a.edit(href='#') Edit
        li
          a.share(href='#') Share
        li
          a.delete(href='#') Delete
    //
      img-cont

John Doeとランダムな電話番号の代わりに、あそこに変数が欲しいということを示す方法があれば、nodeJSコードはそこに正しい値を貼り付けて、メインのjadeページにコンタクトjadeを追加し、次のコンタクトに行く、というようになります。つまり、以下のような感じです。 http://embeddedjs.com/

Nodejsのフレームワークとしてexpressを使っています。

どのように解決するのですか?

レンダーを呼び出す際に、データ付きのオブジェクトを渡すと、それが可能になります。

res.render('your page', {pageData: {name : ['name 1', 'name 2']}});

そして、jadeの内部では次のようなことができます。

span #{pageData.name[0]}

または、ループが必要な場合

each item in pageData.name
  span #{item}

githubのページで詳細を見ることができます。 https://github.com/visionmedia/jade