lit html

אז מה זה בעצם ?

זוהי ארכיטקטורת יצירת קוד HTML מקוד JS .

אם עד היום כדי ליצור אובייקט HTML בצורה דינאמית מתוך הקוד , נדרשתי לכתיבת מספר לא מבוטל של שורות קוד ואם הייתי צריכה כמה אובייקטים? אז בגאונות רבה כתבתי פונקציה שקיצרה לי את הקוד במקצת, - אז היום אני יכולה לומר שלום ולא להתראות לעידן הזה וברוך הבא לעידן הlit html.

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

קודם כל אני מייבאת את הספריה :

import { html , render } from 'https://unpkg.com/lit-html?module';

אפשר גם להתקין אותה :

npm install lit-html
import { html , render } from 'lit-html';

לlit html פונקציות רבות אך נתחיל בפשוטה ובבסיסית שבהן :

Html

הספרייה lit html משתמשת בtemplate string כדי לקבל אליה את המחרוזת שבה כתבתי איך אובייקט הhtml שלי אמור להראות.

השליחה של המחרוזת לפונקציה היא בצורה מיוחדת של פונקציות template string ללא ().

וזה פשוט ביותר .

אם אני רוצה ליצור למשל כפתור דרך הקוד :

בhtml זה אמור להראות כך :

<input type="button" id="submitLogin" class="myButton" value="submit" />

בקוד רגיל זה אמור להראות כך :

let input = document.createElement("input");
input.setAttribute('type' , 'button' );
input.setAttribute('id' ,'submitLogin');
input.setAttribute('class' ,'myButton');
input.setAttribute('value' , 'submit');
document.getElementById('myDiv').appendChild(input);

😓

בlit html פשוט לקחתי את קוד הhtml הרגיל הכנסתי לתוך מחרוזת שלחתי לפונקציה ואז לעוד אחת וזה הכל!.

Let template = html`<input type="button" id="submitLogin" class="myButton" value="submit" />`;
Render(template , document.getElementById('myDiv'));

ויש לי אלמנט מושלם בשתי שורות !

הכי ברור והכי מובן.

ומה אם אני רוצה ליצור כמה אלמנטים או טבלה ?

בשביל זה יש את הפונקציה map

היא דומה במבנה שלה לכל הפוקנציות שעובדות על מערכים :

Let arrayTemplate = html`${Array.map(a=>html`<span>${a.name}</span>`)}`;
Render(arrayTemplate , document.getElementById('arrayDiv'));

ועכשיו לאליפות של lit html - יצירה של טבלת סטודנטים ממערך של אובייקטי סטודנטים המכילים מזהה , שם וטלפון :

Let tableTemplate = html`<table>
<tr>
<th>name</th>
<th>phone</th>
</tr>
${students.map(s=> html`<tr id="${s.id}" class="trClass">
<td>${s.name}</td> 
<td>${s.phone}</td>
</tr>`)}</table>`;
Render(tableTemplate , document.getElementById('tableDiv'));

כמה שורות זה לקח לי ? לא רוצה לדמיין כמה זה היה לוקח לי בלי lit html!

חשבו לי לציין שאם אתן משתמשות בה בתוך תגית script בגלל הייבוא של הספרייה יש להפוך את תגית הscript ל

type="module"

במקרה כזה אי אפשר להאזין מתוך תגית כזאת לארועים .

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

window.buildTable = buildTable;

הפעלת הפונקציה מתגית אחרת :

buildTable();

ממליצה לכן לנסות בטוחה שתאהבו!