vue router component
-
נתחיל מכך שvue באמת נח וקל לעבודה.
ויש להם ספריית תוסף שאיתה אפשר לעשות router - ניתוב - לאתר, תוך שימוש בדף סטטי אחד והדפים משתנים ואותו הדבר בשורת הכתובת של הדפדפן.
ואני כידוע בהתחלה, והסתבכתי עם הראוטר הזה.כיון שכל עוד מדובר על טמפלט של טקסט אחד (עם בינדינג) הכל מצויין, אבל לא מצאתי דוגמא שמסבירה איך מחליפים דפים ממש.
אשמח לעזרה.
תודה מראש. -
השאלה שלך מנוסחת לא ברור. דף HTML עשיר ככל שיהיה הוא דף טקסט, וטקסט פשוט כבת שאתה מצליח ואף הבאת דוגמא מצויינת.
אם אתה רוצה שתוכן הטמפלייט ימלא את הדף, זה עניין עיצובי ואתה יכול.
אולי אתה מתכוון שאתה רוצה שבמקום לכתוב את הHTML שלך בתוך מחרוזת סטרינג (בקובץ הJS בפרמטר Template) שיהיה פרמטר כמו UrlTemplate שיפנה לקובץ HTML בשרת.
אז כפי הנראה אין את הפינוק הזה, ועליך להוריד ע"י HttpRequest את הקובץ ולשים את תוכנו בתוך הפרמטר Template.
ראה פה: https://stackoverflow.com/questions/31633573/vuejs-templating-how-to-load-external-templates -
@dovid
ה-vue בנוי שיש אלמנטים שאפשר לקחת בהורשה, וככה להקל על סידור ה-HTML, המכונים component.
https://vuejs.org/v2/guide/components.html
השאלה איך אני מכניס אלמנט כזה לתוך הניתוב. (בדוגמאות דלעיל זה טקסט משתנה ולא אלמנט שלם). -
אפרופו מה שחשבתי שהציק לך,
@dovid אמר בvue router component:
אולי אתה מתכוון שאתה רוצה שבמקום לכתוב את הHTML שלך בתוך מחרוזת סטרינג (בקובץ הJS בפרמטר Template) שיהיה פרמטר כמו UrlTemplate שיפנה לקובץ HTML בשרת.
אז כפי הנראה אין את הפינוק הזה, ועליך להוריד ע"י HttpRequest את הקובץ ולשים את תוכנו בתוך הפרמטר Template.
ראה פה: https://stackoverflow.com/questions/31633573/vuejs-templating-how-to-load-external-templatesבדיוק היום איזה פולני כתב על זה
https://wildermuth.com/2018/03/11/Remote-Views-in-Vue-js -
-
-
@chagold אמר בvue router component:
יש כאן 2 דוגמאות בהם עשיתי מה שאמור להיות קבלת קומפוננט דינמי.
זאת, והשניה (אותו קוד רק עם שינוי סדר האובייקטים), בשניהם הוא מציג את הקומפוננט כפול, כשפעם אחת לא טוב ופעם השניה טוב. איך מבטלים את התצוגה שהוא לא מקבל ערכים?תודה
הסיבה שיש שתיים זה כי פשוט שמת אחד נוסף בhtml מחוץ לראוטר-ויו.
שנית, נראה לי זה טעות לשים בטמפלייט של קומפננטה של route קומפננטה אחרת, זה שרשור מסובך שמקשה על העברת הפרמטרים. תשתמש רק בBar שים בטמפלט את מלוא הטמפלייט שעשית לpw וזהו. -
-
דוגמא שעובדת
https://jsfiddle.net/jLo18grp/69/ -
@chagold יפה שאתה מתקדם.
אבל תדע לבחירות עתיד, שהקושי העצום לאיתור דוגמאות ותיעוד, הוא נגזר מכמות המשתמשים.
הטיפוס של vue הוא מהיר מאוד והוא נעשה פופלרי מיום ליום אבל עדיין לא מגרד את אנגולר, והכי גרוע שהוא בכלל לא היחיד בתחום יש עוד עשרות פופלריים, ועוד מאות פחות. בתוך הים הזה יש שתי בעיות: למצוא מי שמתחבט כמוך (ויש הרבה) והעלה קוד מסודר לאינטרנט עם הסברים (1:1000), שנית, שהפרימוורק יישאר רלוונטי ולא יבוא אחר ויכבוש את מקומו בסערה.
עריכה: עוד נקודה, עד כמה יעשו פתרונות למקרים לא קלאסיים.לדעתי לא חכם לעזוב כעת את vue כי הוא מבטיח מאוד, אבל שים לב מאוד לבחירותיך הבאות תוך נסיון מהנ"ל.
-
בשלב הבא אני עדין מסתבך. (להכניס לתוכו קומפוננט עם v-for)
https://jsfiddle.net/jLo18grp/77/
דבר ראשון זה לא עובד.
דבר שני, כרגע לפי מה שעשיתי, הייתי חייב לתת בDIV שבתוכו הקריאה לקומפוננטיננט todo-item את הid="app-7", כדי שיוכל לקבל הנתונים.
אבל למעשה כרגע הוא כביכול מקבל נתונים משתי מקורות, גם משם וגם בתוך האלמנט appaa.תודה מראש
-
עדכון:
https://jsfiddle.net/jLo18grp/116/ -- עובד!!@dovid אמר בvue router component:
עריכה: עוד נקודה, עד כמה יעשו פתרונות למקרים לא קלאסיים
זה מאד לא מובן לי, כיון שמה שטיפה יותר מורכב לא אומר שהוא לא קלאסי. כמו שלולאת v-for קיימת, אז גם זה אמור להיכנס בקומפוננט, ואם עושים ראוטר אז זה אמור לכלול גם את זה.
העיקר שיש פתרון.הפרנציפ זה שיש לו 2 מערכות 1 הטמפלט והשני זה הDATA - אותו הוא מקבל דרך הראוטר
-
במקרה הנ"ל,
אני רוצה שלחיצה על div תפעיל אירוע. אין בעיה להכניס א כל הdiv בתוך router-link ולעשות אותו ללינק, אבל לא הצלחתי להפעיל אירוע כלשהו בעת לחיצה על הלינק.הפרנציפ שאמור לעבוד זה כמו כאן. אבל לא הצלחתי לממש כנראה כיון שכאן זה בתוך v-for.
עזרתכם????
תודה מראש.
ואם לא, אני ס"ה רוצה לעדכן איזה משתנה ברקע. אולי אוכל לעשות את זה דרך פונקציה שלא קשורה לvue?
