データを EJS テンプレートに渡す、またはその逆 — 初心者向けガイド-jsチュートリアル-php.cn

データを EJS テンプレートに渡す、またはその逆 — 初心者向けガイド

DDD

リリース： 2024-09-14 14:30:10

オリジナル

1102 人が閲覧しました

ねえ??‍♂️ ! EJS (Embedded JavaScript) を始めたばかりで、サーバー と EJS テンプレート の間でデータを渡す方法を疑問に思っている場合は、ここが正しい場所です。！今週ずっと EJS について学んでいました。EJS へのデータの受け渡しとデータの操作方法について学んだことを共有したいと思いました。

サーバーから EJS テンプレートにデータを渡す方法

つまり、サーバー (Node.js Express) から EJS テンプレートにデータを送信する場合は、非常に簡単です。 res.render() メソッドを使用するだけで、データをサーバーから .ejs ファイルに送信できます。

その方法は次のとおりです:

res.render("ejs_file_name", { data });

ログイン後にコピー

この例では、EJS ファイル (index.ejs としましょう) をレンダリングし、データオブジェクトをテンプレートに渡します。

次に、EJS テンプレートでこのデータを使用するには、次のようにアクセスするだけです:

<%= data %>

ログイン後にコピー

簡単な内訳は次のとおりです:

res.render() は、データをテンプレートに送信する役割を果たします。
EJS の <%= data %> タグは、渡されたデータが表示される場所です。

データの名前 (この場合は data など) が両方の場所 (サーバーコードと EJS テンプレート内) で同じであることを確認してください。一致しない場合、事態はおかしくなります!

待って…データがない場合はどうなりますか? ?

ここが注意が必要な部分です。EJS は、データを使用する前にデータが存在するかどうかをチェックしません。データが常にそこにあるかのように使用されます。そのため、存在しない (または適切に渡されていない) データにアクセスしようとすると、EJS がエラーをスローしてアプリをクラッシュさせる可能性があります。始めたばかりのときは、とてもイライラするかもしれません!

Passing Data to EJS Templates and Vice-Versa — A Beginner

でも心配しないでください。簡単な解決策があります。データを使用する前に、データが存在するかどうかを確認できます。次のように if 条件内にデータをラップできます:

<% if (locals.data) { %>
  <%= data %>
<% } else { %>
  No data available!
<% } %>

ログイン後にコピー

こうすることで、何か問題が発生した場合やデータが渡されなかった場合でもアプリがクラッシュすることはありません。代わりに、フォールバックメッセージを表示するか、別のアクションを実行できます。

? プロのヒント: テンプレートを使用する前に、データがテンプレートに存在するかどうかを必ず確認してください。そうすることで、多くの悩みを軽減できます。

チャレンジタイム: EJS からサーバーにデータを渡す

この学習の旅を楽しくするために、ユーザーの名前を入力として受け取り、名前に含まれる文字数をユーザーに伝える単純なプロジェクトを構築することにしました。シンプルですよね？私がやった方法は次のとおりです:

入力データの取得:
ユーザーの姓名を取得する HTML フォームを使用しました。
サーバーにデータを送信:
POSTを使用して、入力データをサーバーに送信し、フルネームの文字数を計算します。
処理されたデータをテンプレートに送信します:
ページに表示するために文字数を EJS テンプレートに戻しました。

これを処理するサーバー側のコードは次のとおりです。

app.post("/submit", (req, res) => {
  const charCnt = req.body["fName"].length + req.body["lName"].length;
  res.render("index.ejs", { charectercount: charCnt });
}); // I used body-parser to get the data from the form

ログイン後にコピー