console.log(myDataItem);

let myDataItem;

//src/routes/ page.svelte – Entfernen Sie diese Zeile vor der Ausführung
<script>
    let popupVisible = true;

    Funktion togglePopup() {
        popupVisible = !popupVisible;
    }
</script>

<div>
    {#if popupVisible}
        <-Taste
           >



<p>Der Code ist hier in zwei Abschnitte unterteilt. Der obere Abschnitt „script“, definiert durch <script></script> Tags, deklariert eine popupVisible-Javascript-Variable und eine togglePopup()-Funktion. Der untere Abschnitt „Vorlage“ gibt HTML an, das durch einen Svelte-Logikblock {#if} {/if} „moderiert“ wird. Svelte-Code kann auf Variablen und Funktionen verweisen, die im <script> Abschnitt zur Anleitung zur HTML-Codegenerierung. Referenzen werden in geschweifte Klammern {} eingeschlossen, es sei denn, sie werden direkt innerhalb eines Logikblocks verwendet – ausführliche Informationen finden Sie in der Svelte-Dokumentation unter Basic Markup and Logic Blocks.</p>

<p>Der oben angezeigte Code ist sehr grob. Ein „Popup“ wird normalerweise durch ein <div> definiert. Tag formatiert mit einem Rahmen und etwas Positionierungs-CSS. Hier habe ich einen <Button> Tag – etwas, das häufiger zum Definieren des „Submit“-Elements in einem Formular verwendet wird. Ich habe dies einfach deshalb getan, weil ich dadurch einige technische Details vermeiden kann, die Sie ablenken könnten. Ich habe den Button „Popup“ blau eingefärbt, damit Sie ihn sehen können.</p>

<p>Wenn Sie noch eine Kopie des Skelettprojekts svelte-dev Svelte haben, das in Post 2.1 erstellt wurde, versuchen Sie, diesen Code zu verwenden, um den gesamten Inhalt von src/routes/page.svelte zu ersetzen. Wenn Sie ein Terminal für das Projekt öffnen und den Entwicklungsserver wie zuvor starten, sollte Ihr Browser nun zum Leben erwachen und den unten gezeigten Bildschirm anzeigen:</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173277643775221.jpg" alt="NgSysV.Creating a simple Reactive Svelte webapp"></p>

<p>Das blaue Rechteck ist das „Pop-up“. Es wird beim Start angezeigt, da zu diesem Zeitpunkt die Variable „popupVisible“ auf „true“ gesetzt ist und die Svelte-Logik, die die HTML-Generierung der Seite steuert, angewiesen wird, eine <Schaltfläche> zu erstellen. Tag in diesem Fall.</p>

<p>Versuchen Sie nun, auf das Popup zu klicken. Magie! Es verschwindet. Dies liegt daran, dass die <Schaltfläche> Das Tag, das das Popup angibt, enthält eine onClick-Klausel, die bewirkt, dass ein Klick auf das Element die Funktion togglePopup ausführt. Dies wiederum setzt die Variable popupVisible auf false.</p><p>Ich habe vorhin gesagt, dass das Ändern einer Svelte-„Status“-Variable dazu führt, dass Svelte den Bildschirm aktualisiert, indem der Vorlagenabschnitt der Seite erneut ausgeführt wird. Der Vorlagenabschnitt wird also erneut ausgeführt und da der Wert von popupVisible nun „false“ ist, wird der <button> Der Code, der das Popup anzeigt, wird umgangen und hinterlässt eine leere Seite.</p>

<p>Nehmen Sie sich jetzt einen Moment Zeit, um dies auf sich wirken zu lassen. Wenn Sie immer noch mit dem primitiven DOM-Manipulationscode gearbeitet hätten, den ich in Beitrag 1.1 eingeführt habe, hätte dieser Effekt nur durch das Schreiben einiger einigermaßen technischer (und wahrscheinlicher) Texte erzielt werden können eher ineffizienter) Low-Level-Code. Hier mussten Sie lediglich den Wert einer Variablen ändern. Sveltekit hat die komplizierten Konsequenzen <strong>automatisch</strong> (und, seien Sie versichert, effizient) bewältigt. </p>

<p>Kurz gesagt: Svelte bietet Ihnen eine Hochsprache, mit der Sie die mühsamen Details der Browser-Bildschirmverwaltung dem Framework überlassen können.  </p>

<p><em>Im Oktober 2024 führte Svelte 5 eine Reihe von Verbesserungen seiner Reaktivitätsdefinitionsvereinbarungen ein. Das oben beschriebene let-Konstrukt funktioniert immer noch gut für alles in dieser Beitragsreihe, aber für komplexere Anforderungen steht jetzt ein neues Runenkonzept zur Verfügung. Weitere Informationen finden Sie unter „Was sind Runen“.</em></p>

<h4>
  
  
  2.2 Dateneingabe
</h4>

<p>Machen wir das Pop-up etwas interessanter. Stellen Sie sich vor, Sie hätten die Aufgabe, eine „Produktliste“ für ein produzierendes Unternehmen zu verwalten. Sie benötigen ein Dienstprogramm, das die aktuelle Liste anzeigt und Ihnen das Hinzufügen neuer Produkte ermöglicht. In der Praxis möchten Sie natürlich auch, dass Einträge bearbeitet und gelöscht werden können, aber lassen Sie uns die Dinge vorerst einfach halten. </p>

<p>Sehen Sie sich den folgenden Code an. Es wird wahrscheinlich Ihre JavaScript-Kenntnisse erweitern, aber die internen Kommentare sollten helfen.<br>
</p>

<pre class="brush:php;toolbar:false">//src/routes/ page.svelte – Entfernen Sie diese Zeile vor der Ausführung
<script>
    let popupVisible = false;
    let newProductNumber = "";
    let products = []; // Ein Array von Produktobjekten {productNumber: productNumber}
</script>

<div>



<p>Der Abschnitt „Vorlage“ beginnt hier mit der Überprüfung des Werts von popupVisible. Wenn dies falsch ist (was beim Start der Fall sein wird, da die Variable gerade im Abschnitt „Skript“ initialisiert wurde), zeigt die Webanwendung die aktuelle Liste der „Produkte“ der Webanwendung an (ein Array von Produktnummern, die in einem Produktarray gespeichert sind). </p>

<p>Der Code geht nun weiter und zeigt eine Schaltfläche „Ein weiteres Produkt hinzufügen“ an – jetzt eine normale, nicht die verrückte Version, die im vorherigen Beispiel verwendet wurde. Aber wie zuvor verfügt es über eine zugehörige on:click-Funktion, und diese setzt den Wert von popupVisible auf true.</p>

<p>Was passiert, wenn auf die Schaltfläche geklickt wird? Da popupVisible eine reaktive Variable ist, aktualisiert die Webanwendung ihren Bildschirm.</p>

<p>Dieses Mal wird der Produktanzeigeabschnitt des Formulars ignoriert und die Steuerung wird direkt zum zweiten Teil des Vorlagenabschnitts verschoben.</p><p>Hier sehen Sie eher etwas wie ein herkömmliches Popup. Dieses verwendet ein <form> Tag innerhalb eines Containers div> um Eingaben für eine newProductNumber-Statusvariable zu sammeln.  Hier wird ein spezieller „bind“-Qualifizierer von Svelte verwendet, um newProductNumber mit der Tastatureingabe des Benutzers zu synchronisieren. Jedes Mal, wenn der Benutzer ein Zeichen in das Feld <input> des Formulars eingibt, wird newProductNumber aktualisiert. 

<p>Wenn der Benutzer schließlich auf die Schaltfläche „Registrieren“ des Formulars klickt, ist seine on:click-Funktion somit in der Lage, eine vollständig aktualisierte newProductNumber in das Produktarray zu verschieben und das Feld „popupVisible“ zurückzusetzen.</p>

<p>Da es sich bei popupVisible um eine reaktive Variable handelt, wird schließlich der Abschnitt „Vorlage“ des Codes erneut ausgeführt und das Popup wird durch die aktualisierte Liste der Produktnummern ersetzt.</p>

<p>Ein oder zwei andere Dinge könnten Sie verwirren. Im vorherigen Beispiel verwies der anon:click-Qualifizierer auf eine Funktion, die im <script> der Webanwendung definiert war. Abschnitt. In dieser neuen Version von page.svelte wird die Funktion jedoch explizit innerhalb des <button> definiert. HTML-Spezifikation des Feldes. Beide Ansätze sind vollkommen gültig. Die hier verwendete Version sieht für Sie vielleicht etwas seltsam aus, aber es handelt sich um eine weit verbreitete Anordnung, die den Vorteil hat, dass die Logik der Funktion an ihrem Aufrufpunkt definiert wird. Dadurch ist es viel einfacher zu erkennen, was vor sich geht. </p>

<p>Als Referenz der Ausdruck:<br>
„() => { .... }“ sagt: „Hier ist eine Funktion, die durch die folgenden JavaScript-Anweisungen definiert wird: „{ .... }“. Es gibt viele Varianten. Bitten Sie chatGPT, Ihnen ein Tutorial zu „arrow“ zu geben " Funktionen .</p>

<p>Im weiteren Verlauf werden Sie auch feststellen, dass ich bei meinem „Styling“ viel experimentierfreudiger geworden bin. Es gibt zum Beispiel eine Überschrift und alles ist schön zentriert (CSS-„Vererbung“ sorgt dafür, dass die >

</p><p>Aber das ist genug Hintergrundwissen. Sehen wir uns die Webapp in Aktion an. Fügen Sie den neuen Code über den aktuellen Inhalt Ihrer page.svelte-Datei ein, speichern Sie ihn und öffnen Sie (falls erforderlich) ein Terminal in Ihrem Projekt und starten Sie Ihren Entwicklungsserver mit dem Befehl npm run dev -- --open neu. Folgendes sollten Sie in Ihrem Browser sehen::</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173277643810144.jpg" alt="NgSysV.Creating a simple Reactive Svelte webapp"></p>

<p>Und Folgendes sollten Sie sehen, wenn Sie auf die Schaltfläche klicken:<br><br></p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173277643952736.jpg" alt="NgSysV.Creating a simple Reactive Svelte webapp"></p>

<p>Da es keine Validierung für das Feld „newProductNumber“ gibt, werden Sie feststellen, dass Sie sowohl Zeichen als auch Zahlen eingeben können – wir werden dies in einem zukünftigen Beitrag beheben. Wenn Sie jedoch auf die Schaltfläche „Registrieren“ klicken, sollte das Popup durch die ursprüngliche Seite mit der Anzeige des Lagerbestands ersetzt werden und die „Nummer“ Ihres neuen Produkts zur Liste hinzugefügt werden.</p>

<p>Dieses Stück Svelte fängt fast an, wie ein Informationssystem auszusehen! </p><h3>
  
  
  3. Vorwärts und aufwärts
</h3>

<p>Dieser Beitrag hat Ihnen einen kurzen Einblick in die Schlüsselkonzepte gegeben, die in der Svelte-Sprache verkörpert sind. Leider gibt es einen Haken. Wie Sie sicher bemerkt haben, ist das Beispiel „Inventar“, das Sie gerade gesehen haben, praktisch nutzlos, da jedes Mal, wenn Sie die Webanwendung schließen, die Produktliste verschwindet! Der nächste Schritt besteht daher darin, Ihnen die <strong>Firestore</strong>-Datenbanktechnologie von Google vorzustellen. Dadurch können Sie <strong>persistenten</strong> Speicher auf einem Serverhost erstellen. </p>

<h3>
  
  
  Nachtrag (a): Wenn etwas schief geht – Untersuchen von Layoutproblemen mit dem Chrome Inspector
</h3>

<p>In Beitrag 2.1 wurde unter „Wenn etwas schief geht“ beschrieben, wie man mit einigen der gröberen Probleme umgeht, die bei der Entwicklung einer Webanwendung auftreten können. Aber jetzt, wo Sie auf einem fortgeschritteneren Niveau arbeiten, benötigen Sie ein ausgefeilteres Werkzeug. Dieser Abschnitt stellt Ihnen den „Chrome Inspector“ vor, ein unschätzbares Hilfsmittel bei der Korrektur von Problemen mit dem Bildschirmlayout Ihrer Webanwendung und Logikfehlern in Ihrem JavaScript (und vielem mehr, wie Sie später in dieser Serie sehen werden).</p>

<p>Der Inspektor wird auf einer Webanwendungsseite gestartet, indem Sie mit der rechten Maustaste auf die Seite klicken und die Option „Inspizieren“ auswählen. Hier ist ein Beispiel für die Ausgabe:</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173277644070139.jpg" alt="NgSysV.Creating a simple Reactive Svelte webapp"></p>

<p>In diesem Screenshot habe ich:</p>