בעיה בהעברת אובייקט שלם מ-Node ל-ejs

[yossiz]

@odeddvir אמר בבעיה בהעברת אובייקט שלם מ-Node ל-ejs:

const myClient = JSON.parse('<%-JSON.stringify(client)%>');

האם אפשר להשמיט את הגרשים ואת הקריאה ל-JSON.parse, ולנצל את העובדה שאובייקט בתחביר JSON הוא גם אובייקט JS חוקי?

אגב, גיגול זה: ejs pass object to client side script מביא פתרונות דומים לשלך.

[OdedDvir]

@yossiz אמר בבעיה בהעברת אובייקט שלם מ-Node ל-ejs:

האם אפשר להשמיט את הגרשים ואת הקריאה ל-JSON.parse, ולנצל את העובדה שאובייקט בתחביר JSON הוא גם אובייקט JS חוקי?

זה לא עובד, יש לי באובייקט שדה _id שמכיל Guid שמתחיל בספרה, והוא לא מוקף גרשים, ואני מקבל SyntaxError בדפדפן כי זה לא JSON תקני.

[zvizvi]

@odeddvir אמר בבעיה בהעברת אובייקט שלם מ-Node ל-ejs:

זה לא עובד, יש לי באובייקט שדה _id שמכיל Guid שמתחיל בספרה, והוא לא מוקף גרשים, ואני מקבל SyntaxError בדפדפן כי זה לא JSON תקני.

נסה לעשות את הstringify בצד השרת:

res.render('client/details', { client: JSON.stringify(client) });

[dovid]

@yossiz זה בדיוק מה שאמרתי, שבגלל שרוב משתמשי אקספרס לרוב לא משתמשים ברנדור צד שרת ממילא כשצריך אותו (וכשצריך אז צריך) המצב קשה. אני לא יודע איפה ראית שהאשמתי את אקספרס אבל אני אכן מאשים אותם. למה שהם יעשו? למה לא כל מפתח בעולם אחר? זה בדיוק הבעיה שיש יותר מידי אחרים, וזו בעיה שהם יצרו. אני הייתי מצפה מהמקרו פרימוורק הזה לתת מנוע תצוגה אחד שעובד מעולה, במקום דמוקרטיזציה מעצבנת בה הם זונחים לגמרי את התחום לחסדי ספריות לא יציבות שהתחרות ביניהם רק פוגעת מאשר עוזרת. תחרות זה גורם חיובי רק בתחום פופולרי מספיק לקנאת סופרים.

@OdedDvir זה בהחלט לגיטימי לרנדר אובייקט ישירות לסקריפט, וזה לדעתי בהחלט חלק מהייעוד של EJS לתת את היכולת הזו.

[yossiz]

@zvizvi אמר בבעיה בהעברת אובייקט שלם מ-Node ל-ejs:

@odeddvir אמר בבעיה בהעברת אובייקט שלם מ-Node ל-ejs:

זה לא עובד, יש לי באובייקט שדה _id שמכיל Guid שמתחיל בספרה, והוא לא מוקף גרשים, ואני מקבל SyntaxError בדפדפן כי זה לא JSON תקני.

נסה לעשות את הstringify בצד השרת:

res.render('client/details', { client: JSON.stringify(client) });

לצערי לא הבנתי לא את הבעיה ולא את הפתרון. אבל זה לא קשור ישירות לנושא.

[zvizvi]

למרות שזה לא הנושא הישיר אתן סקירה קטנה מנסיוני.
מנועי התצוגה (Template engine) בNode מתחלקים לשניים:

• אלה שמשתמשים במילים ופקודות שמורות משלהן עבור כל פקודה, והן שואבות השראה ממנועים אחרים בשפות אחרות (שם הדבר מפותח מאוד ובשימוש רב).
  במנועים אלה האפשרויות מצומצמות למספר מילים שמורות בלבד (if, else, switch) וכד'. יש גם "פילטרים" שמאפשרים לשנות את הערך של משתנה המודפס לדוגמה: {{ count | add: 1}}
  כאשר רוצים להציב תנאי מורכב או להציג ערך קומבינציה שמורכב מכמה פרמטרים יש צורך לבנות רכיב תצוגה מיוחד ולהעביר אותו לפקודת הRender בדומה להעברת שאר הData מצד השרת לטמפלט.
  שיטה זו דומה למנועים אחרים רבים הקיימים בשפות אחרות, דוגמת Django של פייתון או Laravel של PHP,‏ ERB ברובי וכן הלאה.

• אלה שמאפשרים לשים פקודות Javascript מלאות בין חלקי הhtml בקובץ, כמו כן ניתן לשים תנאים מורכבים שתלויים בהרבה משתנים, ולא צריך לבנות לזה רכיב תצוגה במיוחד.
  שיטה זו דומה לכתיב של php טהור בקבצי html.

בקבוצת המנועים הראשונה ניתן למנות את Pug (Jade לשעבר), Handlebars, mustache.js, ועוד,
בקבוצה השניה יש את Ejs (לדעתי זהו היחיד שקיים).

סגנון התחביר להכנסת פקודות בין חלקי הhtml משתנה בין הספריות השונות, יש כמה סגנונות מקובלים (ובכל שפת תכנות יש כמה שלקחו השראה מכל סגנון כזה)

באיזה מנוע כדאי להשתמש?

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

[chv]

בלי להעיב על הפירוט המעולה של @zvizvi שמעליי, ועם דעתי ההדיוטית:
@OdedDvir התנסתי הרבה עם HBS (handlebars) - כן זה עם השפם (אם אני משער נכון זה על המשקל של mustache שהיא באה להחליף?)
הוא מעולה.
ועד כמה שאני זוכר נכון (ומסתכל בקוד שקיים אצלי במחשב וזה נראה ש=) הוא נותן בקלות להעביר אובייקטים לתוך משתנים בפרונט-אנדJS. ממה שאני רואה אצלי בקוד (שוב: רק ממבט מלמעלה) זה פשוט להעביר את זה ממש בצורה הרגילה - להכניס את זה בשלב הרינדור לפקודה כקונטקסט, ובתוך הטמפלייט להכניס את זה ב {{ }}
עריכה טעות שלי (אולי זה אפשרי, בכל אופן אני לא מכיר) עי' יוסי להלן

אגב @yossiz שאלת או אמרת באיזה עוד פלטפורמות יש מנועים כאלה (לפחות הידועים שבהם) אז כמובן מדובר על דג'אנגו, שזה מובנה בו וזה צורת העבודה איתו מלכתחילה

סורי שהפרעתי ותודה ל @zvizvi על הפוסט הבהיר

[dovid]

@chv מה ש@yossiz שאל, זה איפה יש מנוע תצוגה שטוב יותר מההיצע שיש בנוד.

[yossiz]

@chv אמר בבעיה בהעברת אובייקט שלם מ-Node ל-ejs:

ועד כמה שאני זוכר נכון (ומסתכל בקוד שקיים אצלי במחשב וזה נראה ש=) הוא נותן בקלות להעביר אובייקטים לתוך משתנים בפרונט-אנדJS. ממה שאני רואה אצלי בקוד (שוב: רק ממבט מלמעלה) זה פשוט להעביר את זה ממש בצורה הרגילה - להכניס את זה בשלב הרינדור לפקודה כקונטקסט, ובתוך הטמפלייט להכניס את זה ב {{ }}

אני לא מכיר את HBS אבל מהתשובה פה נראה שאי אפשר.

[chv]

@yossiz צודק.. (כתמיד) עכשיו הסתכלתי וראיתי שבמקור של אותה שורה העברתי את האובייקט לטמפלייט כסטרינגיפיי..

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