איך מכניסים פונקציה בתוך קלאס של אלמנט

[chagold]

איך עושים DIV שהקלאס שלו יריץ פונקציה ?
(אפשרי גם שאירוע אחר עליו, שירוץ רק אחרי שהבינדינג יעלה את האובייקט ל-HTML, אבל נראה לי שהראשון הוא הנכון)?

תודה.

[dovid]

ראשית לא הבנתי, שנית תסביר גם למה אתה נצרך לכך.

[chagold]

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

[dovid]

אם הנקודה היא לחסוך את זמן הטעינה, אז עליך למצוא איך בAPI של select2 עושים טעינה עצילה. זה צורך די בנאלי ואין סיבה שזה לא ממומש עד כמה שזה נצרך.
אני משער שהבעיה היא בעיקר מה שכתבת שהלאמנט פשוט לא קיים והוא נוצר ע"י מחלקה אחרת באופן דינמי.
זה בהחלט לא קל. דרך פשוטה (אבל גם מלוכלכת) זה לכלול בdiv עוטף את הסקריפט עצמו - זה יכול להיות נטו קריאה לפונקציה:

<div>
  <input type="hidden" id="tags" value="tag1,tag2" style="width: 400px;" />
  <script>initNewInput("tags");" </script>
</div>

במידה וכך אתה עושה עליך לוודא שהסקריפט יתייחס דוקא לinput הספציפי שלצידו (ע"י שינוי הID והפרמטר של initNewInput בהתאמה) כי אחרת במידה ויש יותר מאחד בדף הוא יקבל דאבל אירועים ויהיה שמח.

יש דרך יותר טריקית שלמדתי פעם מ @magicode זה לשים אלמנט img (עם תמונה ריקה בbase64) ולשים אירוע onLoad ואז יש לך ביד את האלמנט הקורא בthis ממנו אתה יכול לנווט ל"אחיו" הinput ולהצמיד לו אישית את האירוע.

[aaron]

@chagold אמר באיך מכניסים פונקציה בתוך קלאס של אלמנט:

אבל אני לא רוצה שכשהוא טוען את הדף הראשון האתר הוא יריץ אותו

מה הכוונה יריץ אותו? את הטעינה של הקובץ JS או את ההרצה של הפונקציה select2() ?
מה לגבי

$('#select2-div').ready(function(){
    //..... select2()
})

[chagold]

@dovid אמר באיך מכניסים פונקציה בתוך קלאס של אלמנט:

דרך פשוטה (אבל גם מלוכלכת) זה לכלול בdiv עוטף את הסקריפט עצמו - זה יכול להיות נטו קריאה לפונקציה:

זה לא הולך לי, כיון שהתג </script> מעיף אותי מהJS שבHTML.

הדרך השניה, לצערי לא הבנתי את המימוש.
תודה.

[dovid]

@chagold אמר באיך מכניסים פונקציה בתוך קלאס של אלמנט:

זה לא הולך לי, כיון שהתג </script> מעיף אותי מהJS שבHTML.

לא הבנתי.

[zvizvi]

@chagold אמר באיך מכניסים פונקציה בתוך קלאס של אלמנט:

איך עושים DIV שהקלאס שלו יריץ פונקציה ?
(אפשרי גם שאירוע אחר עליו, שירוץ רק אחרי שהבינדינג יעלה את האובייקט ל-HTML, אבל נראה לי שהראשון הוא הנכון)?

תודה.

אם הבנתי נכון את שאלתך, (ומבלי לגרוע מדברי @dovid ...)

ng-init="function()" 

[chagold]

@zvizvi אמר באיך מכניסים פונקציה בתוך קלאס של אלמנט:

@chagold אמר באיך מכניסים פונקציה בתוך קלאס של אלמנט:

איך עושים DIV שהקלאס שלו יריץ פונקציה ?
(אפשרי גם שאירוע אחר עליו, שירוץ רק אחרי שהבינדינג יעלה את האובייקט ל-HTML, אבל נראה לי שהראשון הוא הנכון)?

תודה.

אם הבנתי נכון את שאלתך, (ומבלי לגרוע מדברי @dovid ...)

ng-init="function()" 

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

[chagold]

@dovid אמר באיך מכניסים פונקציה בתוך קלאס של אלמנט:

@chagold אמר באיך מכניסים פונקציה בתוך קלאס של אלמנט:

זה לא הולך לי, כיון שהתג </script> מעיף אותי מהJS שבHTML.

לא הבנתי.

מופיע לי באתר כל תוכן הקוד שכתוב לי אחרי ה </script>. זה בגלל שהתגית הזו היא תגית סגירה, והמנוע חושב שנגמר כל הסקריפט והוא לא יודע שזה רק איזו שורה קטנה שנכנסה כאן באמצע והוא צריך להמשיך לקרוא את שאר הקוד.
ככה

[chagold]

@aaron אמר באיך מכניסים פונקציה בתוך קלאס של אלמנט:

@chagold אמר באיך מכניסים פונקציה בתוך קלאס של אלמנט:

אבל אני לא רוצה שכשהוא טוען את הדף הראשון האתר הוא יריץ אותו

מה הכוונה יריץ אותו? את הטעינה של הקובץ JS או את ההרצה של הפונקציה select2() ?
מה לגבי

$('#select2-div').ready(function(){
    //..... select2()
})

כל הפונקציה של הselect2 צריכה לרוץ רק אחרי שה-input קיים. בפועל גם הפתרון שלך רץ לי אולי אחרי הטעינה של הכל, אבל הוא לא בודק אם הוא קיים או לא כדי להריץ אותו.

[dovid]

@zvizvi אמר באיך מכניסים פונקציה בתוך קלאס של אלמנט:

@chagold אמר באיך מכניסים פונקציה בתוך קלאס של אלמנט:

איך עושים DIV שהקלאס שלו יריץ פונקציה ?
(אפשרי גם שאירוע אחר עליו, שירוץ רק אחרי שהבינדינג יעלה את האובייקט ל-HTML, אבל נראה לי שהראשון הוא הנכון)?

תודה.

אם הבנתי נכון את שאלתך, (ומבלי לגרוע מדברי @dovid ...)

ng-init="function()" 

זה לא יעבוד אם הקוד מוזרק דינמית ע"י פונקציה חיצונית. צריך compile במונחים של אנגולר 1.

[zvizvi]

@dovid אמר באיך מכניסים פונקציה בתוך קלאס של אלמנט:

@zvizvi אמר באיך מכניסים פונקציה בתוך קלאס של אלמנט:

@chagold אמר באיך מכניסים פונקציה בתוך קלאס של אלמנט:

איך עושים DIV שהקלאס שלו יריץ פונקציה ?
(אפשרי גם שאירוע אחר עליו, שירוץ רק אחרי שהבינדינג יעלה את האובייקט ל-HTML, אבל נראה לי שהראשון הוא הנכון)?

תודה.

אם הבנתי נכון את שאלתך, (ומבלי לגרוע מדברי @dovid ...)

ng-init="function()" 

זה לא יעבוד עם הקוד מוזרק דינמית ע"י פונקציה חיצונית. צריך compile במונחים של אנגולר 1.

לפעמים $scope.$apply() לבד יספיק.

[dovid]

@chagold אמר באיך מכניסים פונקציה בתוך קלאס של אלמנט:

@dovid אמר באיך מכניסים פונקציה בתוך קלאס של אלמנט:

@chagold אמר באיך מכניסים פונקציה בתוך קלאס של אלמנט:

זה לא הולך לי, כיון שהתג </script> מעיף אותי מהJS שבHTML.

לא הבנתי.

מופיע לי באתר כל תוכן הקוד שכתוב לי אחרי ה </script>. זה בגלל שהתגית הזו היא תגית סגירה, והמנוע חושב שנגמר כל הסקריפט והוא לא יודע שזה רק איזו שורה קטנה שנכנסה כאן באמצע והוא צריך להמשיך לקרוא את שאר הקוד.
ככה

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

"</scr" + "ipt>

בדוגמה שלי בכל מקרה יש כמה הזרקות לעשות אז תעשה עם הTemplate strings של ES6, תראה דוגמה שעשיתי:

https://plnkr.co/edit/CcR9YbiPJzagt56t1IGf?p=preview

[chagold]

בסוף מצאתי פונקציה מובנית בvue.
https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks להרצת אירועים בכל שלבי הבינדיגים.
אני השתמשתי בmounted.

ושוב תודה רבה לכולם. אין מילים!!