[解決済み] 変数付き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
関連
-
[解決済み】Failed to load resource: net::ERR_FILE_NOT_FOUND loading json.js
-
[解決済み】フォームコントロールの値アクセサがない
-
[解決済み] Uncaught Invariant Violation: 前のレンダリング中よりも多くのフックをレンダリングした
-
[解決済み】React.jsの配列の子要素のユニークキーを理解する
-
[解決済み】エラー:リクエストのエンティティが大きすぎる
-
[解決済み】FirefoxでGoogle Maps V3をリモートで使用すると「googleが定義されていません」と表示される。
-
[解決済み】Kendo Observable Bindingと併用する場合、Kendo Switch Labelsを変更することは可能ですか?[Kendo-UI]です。
-
[解決済み】Javascript、[オブジェクトHTMLInputElement]を表示中。]
-
[解決済み] クライアントサイドとサーバーサイドのプログラミングの違いは何ですか?
-
[解決済み] Expressを使用してNodeJSサーバーからファイルをダウンロードする
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】React Js: Uncaught (in promise) SyntaxError: 位置 0 の JSON で予期しないトークン < が発生しました。
-
[解決済み】JavaScriptのgetElementByNameが機能しない
-
[解決済み】Javascriptのコールバック関数がFirefoxで「Callback is not a function」というエラーを投げる
-
[解決済み】ある要素が可視DOMに存在するかどうかを確認するにはどうすればいいですか?
-
[解決済み】SyntaxError: 'import' と 'export' は 'sourceType: module' とだけ表示されるかもしれない - Gulp
-
[解決済み] エラー。モジュールhtmlが見つからない
-
[解決済み】Vueのテンプレートまたはレンダー関数が定義されていない 私はどちらも使っていないのですが?
-
[解決済み】 Uncaught Reference Error: stLight is not defined (in Chrome only)
-
[解決済み】TypeError:res.jsonは関数ではありません。
-
[解決済み】Javascript、[オブジェクトHTMLInputElement]を表示中。]