אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » מדריכים » Express » לעבוד עם ejs ב-express.js

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

רן בר-זיק יולי 3, 2016 7:07 am אין תגובות

הסבר מעמיק על מנוע הטמפלייט ejs, המנוע הבסיסי והפשוט ל-express

המאמר הקודם בסדרת המדריכים על 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

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

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

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

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

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

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

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

    הפרויקטים שאני כותב ושוחררו לציבור ברישיון קוד פתוח נמצאים ברובם בגיטהאב.
חיפוש

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד