דף הבית › מדריכים › Express › לעבוד עם ejs ב-express.js

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

יולי 3, 2016 תגיות : בקטגוריה: Express
המאמר נכתב על ידי רן בר-זיק, מתכנת מנוסה וכותב כל המאמרים באתר אינטרנט ישראל.
המאמר הקודם בסדרת המדריכים על expres
המאמר הבא בסדרת המדריכים ל-express
כדאי תמיד להשאר מעודכנים! הרשמו לעדכונים של האתר במייל! - המייל יישלח כל יום ראשון בעשר בבוקר ויכיל אך ורק את המאמרים שהתפרסמו באינטרנט ישראל. ללא ספאם, ללא הצפות, ללא בלגנים. אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂

במאמר הקודם למדנו על טמפלייטינג ב-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

אהבתם? לא אהבתם? דרגו!


תגיות: פורסם בקטגוריה: Express

אל תשארו מאחור! יש עוד מה ללמוד!

כתיבת תגובה

האימייל לא יוצג באתר.

רישום