לעבוד עם ejs ב-express.js

המאמר הקודם בסדרת המדריכים על expresשימוש בטמפלייטים של HTML ב-express.js

המאמר הבא בסדרת המדריכים ל-expressדפי 500 ו-400 ב-express.js

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

במאמר הקודם למדנו על טמפלייטינג ב-express. כלומר היכולת שלנו לקרוא לדפי HTML ולשתול בתוכם משתנים. במאמר הזה נדבר קצת יותר על ejs ונסביר על היתרונות והחסרונות שלה ואיך לעבוד איתה בצורה קצת יותר מתקדמת.

את הדוגמה במאמר הקודם עשינו על אפליקצית express קטנה וחמודה שאנחנו עובדים עליה לאורך כל מאמרי המדריך ל-express.js. ה-app.js שלנו נראה ככה:


var express = require('express');
var app = express();
var help = require('./help');

app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});

app.set('view engine', 'ejs');

app.use('/help', help);

אפשר לראות כאן שמנוע הטמפלייט הוא ejs ויש לנו ראוטר ל-help. הראוטר נראה ככה:


var express = require('express');
var router = express.Router();

router.get('/about-me', function(req, res) {
  res.render('about-me', {header : 'This is dynamic header'});
});

module.exports = router;

ה-URL הרגיל הוא about-me. נכנסים אליו באמצעות http://localhost:3000/help/about-me והוא משתמש בטמפלייט ששמו הוא about-me.ejs והוא נמצא בתיקית views:


<html>
       <h1><%= header %></h1>
</html>

בדוגמה אני מעביר משתנה פשוט מסוג header, אבל אני יכול להעביר משתנים יותר מסובכים כמו למשל אובייקטים או מערכים ולהדפיס אותם באופן מסודר בטמפלייט. למשל, אם אני רוצה להעביר מערך של שמות ילדים ולהדפיסו, אני יכול לעשות משהו כזה:

בראוטר:


var express = require('express');
var router = express.Router();

router.get('/about-me', function(req, res) {

  var children = [
    { id: 1, name: "Omri" },
    { id: 2, name: "Kfir" },
    { id: 3, name: "Daniel" },
    { id: 3, name: "Michal" }
  ];

  res.render('about-me', {header : 'This is dynamic header', children: children});
});

module.exports = router;

כאן אני כותב את שמות הילדים באופן ידני, אבל כמובן שבמקום כתיבה ידנית יכולה להיות כאן קריאה למסד נתונים או ל-API אחר.

בטמפלייט זה יראה כך:


<html>
       <h1><%= header %></h1>
       <table>
       <% for(var i=0; i < children.length; i++) { %>
          <tr>
            <td><%= children[i].id %></td>
            <td><%= children[i].name %></td>
          </tr>
       <% } %>
       </table>
</html>

אפשר לראות שאנחנו יכולים להריץ JS בקלות כל עוד אנחנו בתוך התגיות <% %> וכשאנחנו רוצים להדפיס אותו, אנחנו משתמשים ב<%= %> – כלומר מוסיפים שווה.

כפי שאנחנו יודעים, הרבה פעמים יש לנו Header ו-Footer שהם זהים למדי בכל רחבי האתר. אנחנו יכולים ליצור חלקי טמפלייטים ואז לכלול אותם בטמפלייט הראשי. לדוגמה, אם אני רוצה footer, אני אצור footer.ejs בתיקיה שלי. למשל משהו פשוט:


<div>All rights reserved</div>

כדי לכלול אותו, אני צריך לעשות include, למשל ככה:


<html>
       <h1><%= header %></h1>
       <table>
       <% for(var i=0; i < children.length; i++) { %>
          <tr>
            <td><%= children[i].id %></td>
            <td><%= children[i].name %></td>
          </tr>
       <% } %>
       </table>
       <% include footer %>
</html>

כאשר אני יכול להכניס נתיב שלם ל-include כמובן, רק חשוב שיהיה באופן יחסי לקובץ הראשי של הטמפלייט.

החלקים שלהם אנו קוראים ב-include יורשים מידע מהאב שלהם, כך למשל, אם אני רוצה להעביר מידע לטמפלייט הבן, אני יכול להשתמש במשתנים מתוך טמפלייט האב. למשל:

בראוטר:


var express = require('express');
var router = express.Router();

router.get('/about-me', function(req, res) {

  var children = [
    { id: 1, name: "Omri" },
    { id: 2, name: "Kfir" },
    { id: 3, name: "Daniel" },
    { id: 3, name: "Michal" }
  ];

  res.render('about-me', {pageName : 'About Me', children: children});
});

module.exports = router;

אפשר לראות שאני מעביר pageName שאני יכול להשתמש בו בטמפלייט about me:


<html>
       <h1><%= pageName %></h1>
       <table>
       <% for(var i=0; i < children.length; i++) { %>
          <tr>
            <td><%= children[i].id %></td>
            <td><%= children[i].name %></td>
          </tr>
       <% } %>
       </table>
       <% include footer %>
</html>

אבל אני יכול להשתמש בו בטמפלייט הבן, במקרה הזה ה-footer.ejs:


<div><%= pageName %> All rights reserved</div>

אם זה מזכיר לכם קוד ספגטי מגעיל של PHP אז אתם צודקים כמובן. החוזקה של ejs היא בפשטות שלו. כל מי שיודע HTML ידע להשתמש בו כמעט מיד. הוא גם לא מורכב ודורש מינימום משאבים. החולשה של ejs היא הפשטות שלו. אם אתם צריכים טמפלייטים מורכבים, זו לא צריכה להיות הבחירה הראשונה שלכם אלא אם כן אתם אוהבים קוד ספגטי דוחה (ואתם לא). במקרים האלו כדאי וצריך לשקול מנועי טמפלייטינג אחרים כמו moustache. אבל, אם האפליקציה שלכם נשענת על angular או על react או על כל פריימוורק JS אחר שהוא זה ששולט על הטמפלייטינג בסופו של דבר אז ejs היא הבחירה האולטימטיבית.

אני לא אסקור כאן את כל הטמפלייטים שזמינים ל-express, כי יש המון. במאמר הזה יש השוואה נאה בין מנועי טמפלייט ויש עוד המון שנוצרים כל הזמן. כיוון שכולם פשוטים מאוד לשימוש, כדאי לבחור את מה שהכי מתאים ונעים לכם.

במאמר הבא אנחנו נדון על טיפול בשגיאות ובבעיות ב-express.js

לכל המאמרים בסדרת המדריכים על express

השארת תגובה

לכל המאמרים

RSS Feed

עקבו אחרי בטוויטר

ערוץ הטלגרם של אינטרנט ישראל

הפרויקטים שלי בגיטהאב