Lassen Sie Mavo beim Aufbau interaktiver Webanwendungen leuchten

Dieses Tutorial wird in Mavo eintauchen: eine bequeme und benutzerfreundliche Möglichkeit, komplexe, reaktionsschnelle, anhaltende Webanwendungen zu erstellen, indem HTML und CSS ohne eine Reihe von JavaScript-Code oder Server-Backend geschrieben werden.

Mavo wird von der Haystack -Gruppe am CSAIL am MIT entwickelt und von Lea Verou geleitet.

Wir werden gemeinsam eine Flashcard -Anwendung für Fremdsprachenlernen erstellen. Dies ist eine voll funktionsfähige CRUD -Anwendung, mit der Sie:

• Erstellen, Löschen, Aktualisieren von Karten und neu anordnen Sie sie durch Drag & Drop neu.
• Karteikarten importieren und exportieren.
• Beurteilen Sie Ihre Meisterschaft von Wörtern in Flashkarten.

Hier ist, wie die von uns ausgefüllte Bewerbung aussieht:

In diesem Tutorial werde ich Sie durch den gesamten Aufbau Ihrer Bewerbung führen.

Am Ende einiger Schritte gebe ich Ihnen einige Ratschläge, um zu versuchen, Mavo zu verwenden - mehr zu erfahren - und verbessert die App, die wir bauen.

Bereit? Fangen wir an! ?

Statische Vorlagen

Um zu veranschaulichen, wie Mavo die Standard -HTML -HTML verbessert, werden wir zunächst eine reine statische HTML -Seite erstellen und dann mit Mavo diese statische HTML in eine voll funktionsfähige Webanwendung konvertieren.

Angenommen, wir befinden uns im folgenden HTML -Code:

<h1 id="FlashCard"> FlashCard</h1>
<main><p>Wörter oder Phrasen</p>
  <p>übersetzen</p>
</main>

In diesem Code,<main></main> Elemente repräsentieren eine einzelne Flitzkarte .

Fügen wir einige Stile hinzu, damit unser HTML eher wie eine tatsächliche Flashcard -Anwendung aussieht. Sie können den Quellcode anzeigen und hier verwenden.

Beginnen Sie mit Mavo

Jetzt haben wir nur statische Vorlagen. Es ist Zeit, Funktionen hinzuzufügen, damit es wirklich wie eine Flashcard -App funktionieren kann. Mavo gibt ein brillantes Debüt!

Um Mavo zu verwenden, müssen wir zunächst zu Enthält teilweise seine JavaScript- und CSS -Dateien:

 ...
  <link href="https://get.mavo.io/mavo.css" rel="stylesheet">
  ...

Möglicherweise müssen Sie ältere Browser unterstützen oder möchten den Code lesen können? Sie können die Version und das Erstellen, die Sie verwenden, anpassen, indem Sie mehrere Fragen beantworten.

Definieren Sie Mavo -Anwendungen

Um die MAVO-Funktionalität in der HTML-Struktur zu aktivieren, müssen wir das mv-app Attribut für das Element verwenden, das die Mavo-Anwendung enthält (es kann sogar sein oder Elemente, alle sind in Ordnung! ). Sein Wert ist die ID der Anwendung und sollte auf der Seite eindeutig sein. Wenn wir <code>mv-app ohne Werte verwenden und es kein id oder name Attribut für dasselbe Element gibt, werden Namen wie mavo1 , mavo2 usw. automatisch generiert.

Es wird jedoch dringend empfohlen, die Mavo -Anwendung zu nennen, da der Name an vielen Stellen verwendet wird.

In Betracht ziehen<main></main> Das Element repräsentiert unsere Mavo-Anwendung, fügen wir ihm das mv-app -Attribut hinzu und geben die ID "Blitzkarten" für unsere Anwendung an:

<main mv-app="flashcards">
  ...
</main>

Attributattribute

Es ist Zeit, Mavo zu sagen, welche Anwendungselemente wichtig sind, d. H. Welche Elemente, die wir bearbeitet und gespeichert werden möchten.

Jetzt haben wir zwei solcher Elemente, sie sind es<p> Element. Fügen wir diesen Elementen <code>property hinzu, um Mavo mitzuteilen, dass sie Daten enthalten. Ein Element mit property wird als Eigenschaft bezeichnet.

Wir können property Immobilieneigenschaft auf ein beliebiges HTML5 -Element setzen und Mavo weiß, wie man sie bearbeitbar macht. Zum Beispiel,<input> , Sie können seinen Inhalt bearbeiten, aber<time></time> Ermöglicht Ihnen das Datum/die Uhrzeit mit dem entsprechenden Datums-/Zeitauswahl.

Sie können diese Regeln auch durch Plugins erweitern und Elemente auf neue Weise bearbeitet werden (z. B. reichhaltiger Text).

Denken Sie daran, dass der Wert des property das ähnliche Element wie id oder class beschreiben sollte:

 ...

  <p property="source">Wörter oder Phrasen</p>
  <p property="translation">übersetzen</p>

...

Wenn Sie bereits über class , id oder itemprop -Attribut verfügen, das das Element vollständig beschreibt, können Sie property ohne Wert verwenden, wie z property="source" .

Haben Sie Änderungen in unserer Anwendung bemerkt? Eine Mavo -Symbolleiste mit einer Bearbeitungsschaltfläche wird oben auf der Seite angezeigt. Mit der Schaltfläche Bearbeiten kann der Benutzer zwischen Lesen und Bearbeitungsmodi wechseln. Jetzt befindet sich unsere Anwendung im Lesemodus. Dies bedeutet, dass wir die Daten auf der Seite nicht bearbeiten können.

Die Mavo -Symbolleiste ist vollständig anpassbar , und es ist wahr, dass fast alle von Mavo erzeugten Benutzeroberflächen : Sie können seinen Standort ändern, ihren Standardstil löschen, benutzerdefinierte Schaltflächenelemente hinzufügen oder Ihre eigenen HTML -Elemente und mehr verwenden.

Wir werden später in diesem Tutorial ein benutzerdefiniertes Beispiel wie dieses sehen.

Besuchen Sie diesen Abschnitt der Mavo -Website, um mehr zu erfahren.

Wechseln Sie nun zum Bearbeitungsmodus, indem Sie auf die Schaltfläche Bearbeiten klicken. Was hat sich geändert? Der Text der Schaltfläche Bearbeiten wird zum Bearbeitung , um anzuzeigen, dass wir uns im Bearbeitungsmodus befinden. Wenn Sie über Absätze schweben, sagt Mavo Ihnen, dass Sie klicken können, um sie zu bearbeiten, indem Sie sie in Gelb hervorheben. Fangen wir an! Klicken Sie auf den Text und bearbeiten Sie ihn. Wow! Wir können den Inhalt direkt auf der Seite ändern!

Nehmen wir an, dass zusätzlich zu den Wörtern und ihrer Übersetzungen die FlashCard auch ein Beispiel dafür enthalten sollte, wie Wörter in einem Satz verwendet werden. Verbessern Sie die Anwendung, indem Sie entsprechende Elemente in die Flitzweite hinzufügen.

mv-multiple Attribut

Derzeit enthält unsere Anwendung nur eine Flitzkarte. Das ist nutzlos! Für eine effektive Flash -Card -Anwendung müssen wir Flitzkarten hinzufügen, löschen und neu ordnen können. Wie können wir das tun? Wir können dem Code mehr hinzufügen<main></main> Elemente zum Erstellen von mehr Flitzkarten, aber wie erstellen und löschen Endbenutzer Karteikarten?

Glücklicherweise bietet Mavo etwas, das dies zum Kinderspiel macht: mv-multiple -Eigenschaft, die Mavo sagt, dass bestimmte Elemente kopiert werden können. Es konvertiert die Elemente, die sie verwendet, in eine bearbeitbare Sammlung von Elementen und generiert (anpassbare) UIs zum Hinzufügen, Löschen und Umbau von Elementen.

Wenn Sie mv-multiple in einem Element ohne property verwenden, fügt Mavo automatisch property="collection" hinzu (oder collection2 , collection3 usw., um den Namen eindeutig zu machen). Es wird jedoch empfohlen, dass Sie auch property Eigenschaftseigenschaft verwenden, Ihre Sammlung benennen und sicherstellen, dass Ihre HTML ändert, um ihre Daten zu erhalten.

Konvertieren wir unsere einsamen Karteikarten mit dem mv-multiple Attribut in unserer Anwendung in Flashkardkollektionen:

 ...    
  <main mv-app="flashcards" mv-multiple>
    <p property="source">Wörter oder Phrasen</p>
    <p property="translation">übersetzen</p>
  </main>

Sie können den Eigenschaftsnamen auch als Wert von mv-multiple angeben, wie z. mv-multiple="flashcards" .

mv-multiple -Attribut befindet sich auf dem zu kopierenden Element und nicht auf dem Container der Sammlung. Einer der Fehler, die Menschen machen, ist die Verwendung<main mv-multiple></main> Stattdessen<main></main>

und normalerweise nicht lange entdeckt, bevor er das Element oder den Stil überprüft, um es offensichtlich zu machen. Wechseln Sie nun die Anwendung zum Bearbeiten des Modus. Bitte beachten Sie, dass unter der FlashCard jetzt eine Taste von Fahndarstellungen hinzufügen . Probieren wir es aus: Verwenden Sie diese Schaltfläche, um einige Karteikarten zu erstellen. Jetzt können wir dynamisch neue Elemente direkt in die Anwendung hinzufügen, auch wenn in der HTML kein entsprechendes Element vorhanden ist. Aber das ist nicht alles!

Bitte beachten Sie das<main></main> property Immobilieneigenschaft auf dem Grundstück macht das Ganze nicht wirklich<main></main> Elemente sind bearbeitet, aber stattdessen als Gruppierungselemente . Dies geschieht, wenn Sie property für Eigenschaften für Elemente verwenden, die andere Eigenschaften enthalten. Versuchen Sie, Ihre Maus über die Flitzkarte zu schweben und achten Sie auf die drei Tasten in der oberen rechten Ecke, um Elemente durch Drag-and-Drop-Griffe hinzuzufügen , zu löschen und neu zu ordnen . Durch die Überschwebung über jede Art und Weise können wir verstehen, welcher FlashCard sie entsprechen: Mavo wird es hervorheben. Ist es nicht sehr magisch?

Sie können jedes von Mavo generierte UI-Element anpassen. Sie können beispielsweise einen eigenen Drag-Handle erstellen, indem Sie die mv-drag-handle Griffklasse verwenden.

Die zu jedem Element in der Sammlung hinzugefügten Schaltflächen sind auch über die Tastatur zugegriffen . Sogar neu: Sie können sich auf den Drag -Griff konzentrieren und die Pfeiltasten verwenden, um das Element zu verschieben.

mv-storage Attribut

Nachdem wir die grundlegende Benutzeroberfläche haben, versuchen wir Folgendes:

• Wechseln Sie zum Bearbeitungsmodus (wenn Sie dies noch nicht getan haben).
• Bearbeiten Sie die Quellwörter und Übersetzungen der ersten FlashCard. Fügen Sie ein paar Karteikarten hinzu.
• Schalten Sie die Anwendung wieder in den Lesemodus.
• Endlich ... aktualisieren Sie die Seite.

Was? ! Wohin gingen unsere Daten? Sollte Mavo es nicht retten? was ist passiert?

Tatsächlich haben wir Mavo nie gesagt, ob oder wo wir unsere Daten speichern sollen !

Dazu müssen wir die mv-storage Eigenschaft verwenden. Welche Entscheidungen haben wir? Nun, Mavo eröffnet uns große Möglichkeiten, und das Mavo -Plugin öffnet noch mehr Möglichkeiten!

In unserer Anwendung speichern wir die Daten im Localstorage des Browsers, was eine der einfachsten Optionen ist. Sie eignet sich daher perfekt für unsere erste Mavo -Anwendung. Wir müssen nur das mv-storage mv-app mit dem Wert des local auf dem Element hinzufügen (auch als Mavo-Root bezeichnet).

<main mv-app="flashcards" mv-storage="local">
  ...
</main>

Schauen Sie sich die Mavo -Symbolleiste an. Hast du etwas bemerkt? Eine weitere Schaltfläche wird angezeigt - die Schaltfläche Speichern .

Versuchen Sie, die Anwendungsdaten erneut zu bearbeiten. Beachten Sie, dass die Schaltfläche Speichern jetzt hervorgehoben wird. Schweben Sie über die Save -Taste und Mavo hebt Eigenschaften mit nicht geretteten Daten hervor. Ist es nicht cool?

Klicken Sie auf die Schaltfläche Speichern und aktualisieren Sie die Seite (Sie müssen nicht in den Lesemodus wechseln, bevor Sie die Seite aktualisieren). Sind Ihre Daten noch da? Sehr gut! Wir sind unserem Ziel einen Schritt näher-eine vollwertige Flash-Card-Anwendung.

mv-autosave

Müssen wir jetzt jedes Mal auf die Schaltfläche Speichern klicken, wenn wir Daten speichern müssen? Dies mag sicherer sein und verhindert, dass wertvolle Daten beschädigt werden, kann jedoch oft unpraktisch sein. Können wir Daten automatisch speichern? sicherlich! Um jedes Mal, wenn wir sie ändern, automatisch Daten speichern, können wir die mv-autosave Eigenschaft auf dem Mavo-Rootelement verwenden. Sein Wert ist die Anzahl der Sekunden, die durch Drosselung gespeichert werden. Fügen wir dem Stammelement der Anwendung mv-autosave="3" hinzu:

<main mv-app="flashcard" mv-autosave="3" mv-storage="local">
  ...
</main>

Wenn mv-autosave="3" , kann Mavo höchstens alle drei Sekunden gespeichert werden. Dies ist besonders nützlich für Backends, die die Veränderungsgeschichte (z. B. Github , Dropbox ) halten, um Überschwemmungen zu verhindern, was diese Geschichte unbrauchbar macht.

Um das Drossel zu deaktivieren und sofort zu sparen, können wir mv-autosave="0" verwenden oder einfach mv-autosave verwenden, wodurch auch die speichern taste von der ui entfernt wird (weil er in diesem Fall nutzlos ist).

Ändern Sie die Daten erneut und anzeigen Sie die Schaltfläche Speichern . Hast du es gesehen? Zuerst wurde es hervorgehoben, aber nach 3 Sekunden - es wurde nicht hervorgehoben. Alle unsere Daten werden jetzt automatisch gespeichert!

Jetzt sieht der Hauptteil unserer Anwendung so aus:

<main mv-app="flashcards" mv-autosave="3" mv-storage="local"><p property="source"> Wörter oder Phrasen</p>
        <p property="translation">übersetzen</p>
      </main>

Wir haben die Alpha -Version der Anwendung fast beendet. Jetzt sind Sie an der Reihe, die App besser zu machen. Mach dir keine Sorgen, du hast das gesamte Wissen, das du brauchst.

Verbessern Sie die Anwendung so, dass Karteikarten vom Endbenutzer in verschiedene Gruppen in Bezug auf verschiedene Themen organisiert werden können. Zum Beispiel kann der Benutzer alle Kartenkarten in einer Gruppe, alle Küchenutensilien in eine andere Gruppe usw. sammeln.

?Hinweis!

Es gibt viele Möglichkeiten, dies zu erreichen, je nachdem, was Sie beschließen. Ich hoffe jedoch, dass Sie vor dem Fortfahren über einige Probleme nachdenken:

1. Welche HTML -Elemente werden Sie als Gruppierungselemente verwenden? Es wäre bequem, wenn der Benutzer den Namen des Flash -Decks (Themenname) sehen und die Gruppe zum Titel zusammenbrechen kann.
2. Welche Mavo -Eigenschaften werden Sie zu diesem Element hinzufügen (falls vorhanden)? Wird dieses Element ein Attribut oder eine Sammlung sein?
3. Können Endbenutzer neue Themen hinzufügen, sie löschen und neu ordnen, Thementitel ändern und Flashkarten zwischen Themen verschieben?

Wenn Sie sich entscheiden, Karteikarten nicht nach Gruppen zu organisieren, sondern sie mit Etiketten zu markieren, die verschiedenen Themen entsprechen, ist das in Ordnung. Die Lösung mit Tags ist ebenfalls geeignet. Versuchen Sie zur Übung, diese Methode zu vervollständigen.

mv-bar Attribut

Da unsere App Daten vor Ort lokal speichert, können Benutzer der App ihre Karten nicht mit anderen Benutzern freigeben. Wäre es nicht toll, wenn wir ihnen erlauben, ihre Flitzkarten zu exportieren und die Karteikarten anderer Menschen zu importieren ? Zum Glück sind diese Funktionen bereits in Mavo implementiert und wir können sie einfach zu unserer App hinzufügen!

mv-bar -Eigenschaft steuert, welche Tasten (falls vorhanden) in der Symbolleiste angezeigt werden. Es ist normalerweise auf dem Mavo-Wurzel angegeben (Element mit mv-app Attribut). Schaltflächen werden durch ihre IDs dargestellt (sehr logisch): Bearbeiten, Import, Exportieren usw.

Da wir der Standardsammlung nur wenige Schaltflächen hinzufügen möchten, können wir die sogenannte relative Syntax verwenden, mit der wir Schaltflächen zur Standardsammlung hinzufügen und löschen können, ohne alles ausdrücklich aufzulisten. Wir müssen nur mit dem with Keyword beginnen. Der Wert mv-bar -Attributs.

Auf diese Weise erhalten wir Folgendes:

<main mv-app="flashcards" mv-autosave="3" mv-bar="with import export" mv-storage="local">
          ...
</main>

Probieren Sie diese Funktionen aus: Fügen Sie einige Flashkarten hinzu und exportieren Sie sie in eine Datei. Löschen Sie dann die vorhandene FlashCard und importieren Sie die FlashCard aus der zuvor exportierten Datei.

Ausdrücke und Mavoskript

Fügen wir jetzt einige Statistiken zu unserer App hinzu, wie z. B. die Anzahl der Karteikarten! Klingt es interessant? Ich hoffe es. ?

Dazu müssen wir etwas Neues über Mavo lernen.

Wir können dynamisch auf den Wert jeder Eigenschaft verweisen, die wir überall in unserer Mavo -Anwendung (einschließlich in HTML -Eigenschaften) definieren, indem wir ihren Namen in solchen quadratischen Klammern einfügen: [propertyName] . Hier ist ein Beispiel für einen einfachen Ausdruck , der es uns ermöglicht, Dinge dynamisch zu berechnen und zu reagieren, wenn sie sich ändern.

Mavos Expressionssyntax wird Mavoscript genannt. Es ähnelt einer Tabellenkalkulationsformel, die es uns ermöglicht, Berechnungen und andere Operationen auszuführen (unter Verwendung von Zahlen, Text, Listen usw.), ist jedoch so konzipiert, dass sie leichter zu lesen und sich an verschachtelte Beziehungen anzupassen können. In der Dokumentation erfahren Sie mehr über Mavo -Ausdrücke und Mavoscript.

Versuchen wir es nun aus, fügen Sie den Ausdruck [source] in das Attribut Flashcard hinzu, z. B. zwischen zwei Eigenschaften: Quelle und Übersetzung.

 ...
  <p property="source">Wörter oder Phrasen</p>
  [Quelle]
  <p property="translation">übersetzen</p>
...

Was hat sich in unserer Bewerbung geändert? Der Wert des FlashCard -Quellattributs wird nun zweimal auf der Seite angezeigt.

Wechseln Sie zum Bearbeitungsmodus und versuchen Sie, den Wert des Quellattributs zu ändern. Hast du es gesehen? Der Seiteninhalt wird aktualisiert, wenn Sie den Attributwert ändern! Deshalb habe ich vor diesem Mavo gesagt, dass wir reaktionsschnelle Webanwendungen entwickeln können.

Dies ist wirklich cool, aber in unserem Fall funktioniert es leider nicht viel: Wir können diesen Ausdruck nicht verwenden, um die Anzahl der Karteikarten zu berechnen - wir haben immer nur einen Wert .

Was passiert, wenn wir den Ausdruck [source] außerhalb des Attributs von Flashcard stellen? Wir werden Folgendes bekommen:

 ...
  [Quelle]

    ...

...

Wie unterscheidet sich das von den vorherigen Fällen? Wenn Sie dies nicht getan haben, fügen Sie einige Flash -Karten hinzu. Jetzt sind wir kein Wert , sondern eine von Kommas getrennte Liste von Werten : Quelleigenschaften für alle Flash-Karten. Genau dies suchen immer, wonach wir immer suchen: Die Anzahl der Elemente in der Liste entspricht der Anzahl der Karteikarten in der App.

Macht es Sinn? Ja, aber wäre es nicht logischer, wenn wir die Anzahl der Flashkarten anstelle der Anzahl der Werte seines Quellattributs berechnen? Immerhin existiert die zusätzliche Flitzkarte noch bevor wir ihre Quelle oder Übersetzung ausfüllen. Ich schlage vor, Sie machen Folgendes: Ersetzen wir den Ausdruck [source] durch [flashcard] :

 ...
  [FlashCard]

    ...

...

Haben Sie den Unterschied bemerkt? Wir haben immer noch eine Liste, aber sein Wert ist kein einfacher Wert, sondern ein Objekt , dh ein komplexer Wert, der alle mit jeder FlashCard verbundenen Daten enthält. Die gute Nachricht ist, dass die Anzahl dieser Objekte gleich der Anzahl der Karteikarten entspricht, da jede Flashkard eine hat, auch wenn sie vollständig leer ist. Jetzt haben wir also ein Objekt für jede Flashkard, aber wie berechnen wir sie und zeigen die Gesamtsumme an?

Lassen Sie uns nun mit der Mavoscript -Funktion vertraut und finden die Funktion, mit der wir die Anzahl der Flitzkarten berechnen können. Denken Sie daran, wir haben eine Flashcard -Liste, daher müssen wir eine Funktion finden, mit der wir die Anzahl der Elemente in der Liste berechnen können. Es ist hier - so macht die Funktion count() es!

Aber wie verwenden wir Funktionen in Ausdrücken? Auf welche Regeln müssen wir achten? Ja, es gibt mehrere:

1. Ausdrücke werden in quadratischen Klammern dargestellt.
2. Nisten Sie keine Klammern.

Versuchen wir, die Funktion count() zu verwenden, um die Anzahl der Karteikarten zu berechnen:

 ...
[Count (FlashCard)]

  ...

...

Genau das haben wir nach - jetzt gibt es einige Statistiken in unserer App! Ist es nicht cool?

Ich hoffe, Sie wurden aufgewärmt und bereit, Mavo weiter zu versuchen.

Verbessern Sie die Anwendung, sodass nicht nur Statistiken zur Gesamtzahl der Karteikarten in der Anwendung angezeigt werden, sondern auch Statistiken zur Anzahl der Flashkarten in jedem Thema, falls vorhanden.

?Hinweis!
Möchten Sie Listen basierend auf bestimmten Kriterien filtern? where -Bediener hilft.

Selbsteinschätzung

Wir haben bereits eine Anwendung, mit der wir mehrere Blitzkarten erstellen, bearbeiten und speichern können. Aber wie verfolgen wir, welche Karteikarten wir gelernt haben und welche Karteikarten mehr Übung benötigen? Jede respektable Flascard-Anwendung erfordert eine Selbsteinschätzung. Schauen wir uns an, wie wir es hinzufügen!

Nehmen wir in unserer Anwendung an, wir haben zwei Schaltflächen zur Selbstbewertung: arm und gut. Was möchten wir jedes Mal passieren, wenn der Endbenutzer auf eine Schaltfläche klickt? Nun, diese Idee ist einfach:

• Durch Klicken auf die Schaltfläche "schlecht" zeigt an, dass der Benutzer das Wort noch nicht gelernt hat, und wir möchten, dass unsere App die entsprechende Flitzkarte auf den Beginn der Liste verschiebt, damit sie sie so schnell wie möglich nach dem Start der App sehen können.
• Wenn Sie auf die Schaltfläche "OK" klicken, wird angezeigt, dass der Benutzer das Wort gelernt hat, und die entsprechende Flitzkarte muss bis zum Ende der Liste verschoben werden, damit sie andere Karteikarten verwenden können, die sie noch nicht gelernt haben.

"Sind Sie sicher, dass wir das ohne JavaScript tun können?" Sie könnten fragen. Ja! Mavo ist sehr mächtig und kann uns alle Werkzeuge zur Verfügung stellen, die wir brauchen!

Nachdem wir wissen, was wir implementieren werden, lassen Sie uns zuerst die Benutzeroberfläche einrichten und mit dem nächsten Schritt fortfahren. Unser Tag sieht so aus:

 ...

  ...
  <h2 id="Beurteilen-Sie-sich">Beurteilen Sie sich</h2>
    <button>Unterschied</button>
    <button>Gut</button>


...

mv-action Attribut

Mit Mavo -Operationen können wir unsere eigenen Steuerelemente erstellen, die Daten auf benutzerdefinierte Weise ändern, wenn der Benutzer mit ihnen interagiert. Klingt vielversprechend, oder?

Um benutzerdefinierte Aktionen zu definieren, müssen wir das mv-action Attribut für die entsprechenden Elemente innerhalb der Mavo-Anwendung verwenden. Dies wird jedes Mal durchgeführt, wenn das Element angeklickt wird. Genau das suchen wir immer.

für<form> Element, benutzerdefinierte Aktionen werden ausgeführt, wenn das Formular <em>eingereicht wird</em> . Der Wert <code>mv-action Eigenschaft ist ein Ausdruck. Wir können alle Expressionsfunktionen und Syntax verwenden, die uns von Mavoscript zur Verfügung gestellt werden, sowie einige andere Funktionen, um die Datenmanipulation wie add() , set() , move() oder delete() zu erleichtern. Es ist wichtig zu beachten, dass diese Ausdrücke im Gegensatz zu gewöhnlichen Ausdrücken, die reaktiv berechnet werden, nur bei jedem Auslösen des Betriebs berechnet werden.

Mavo erwartet, dass der Wert mv-action Eigenschaft ein Ausdruck ist, sodass sie nicht in Klammern einschließen müssen : mv-action="expression" . Wenn wir sie einbeziehen, werden sie außerdem als Teile des Ausdrucks behandelt.

Daher müssen wir die Karteikarten innerhalb der Sammlung verschieben, und Mavo hat eine geeignete Funktion, die es uns ermöglicht - move() -Funktion. Der erste Parameter bezieht sich auf das Element, das wir bewegen, und der zweite Parameter ist seine Position in der Sammlung. Denken Sie daran, dass Elemente einer Sammlung ab 0 beginnen.

Weitere Informationen zu move (und deren Varianten) und benutzerdefinierten Aktionen finden Sie in der Dokumentation.

Lassen Sie uns den ersten Punkt der Umriss implementieren, die wir zuvor besprochen haben: Während der Selbstbewertung klickt der Endbenutzer auf die Schaltfläche "schlecht", und die entsprechende FlashCard wird zum Beginn des Satzes wechseln, was der erste ist. Also im Code haben wir:

 ...

  ...
  <button mv-action="move(this, 0)">Unterschied</button>
  ...

...

Beachten Sie, dass wir in der mv-action Eigenschaft das Attribut von FlashCard im Attribut verweisen, da wir die aktuelle Flashcard verarbeiten möchten.

Wenn wir versuchen, den zweiten Punkt des Umrisss umzusetzen, werden wir einem Problem konfrontiert. Können Sie vorschlagen, was genau das Problem ist?

Denken Sie daran, dass, wenn der Endbenutzer auf die Schaltfläche "OK" klickt, die entsprechende Flitzkarte zum Ende der Sammlung wechselt, was die letzte ist. Damit die Karteikarten die letzten im Set sind, müssen wir die Anzahl der Elemente im Set kennen.

Zum Glück haben wir diese Aufgabe zuvor gelöst und die entsprechenden Funktionen implementiert. Aber können wir diese Lösung verwenden, um unser aktuelles Problem zu lösen? Leider können wir nicht: Wie wir bereits wissen, können wir nur auf die Sammlung von Flash -Karten (und die Größe bewerten) außerhalb der Flashcard -Eigenschaften verweisen. Aber in unserem Fall müssen wir es tun: Wir müssen den Ausdruck für die "gute" Schaltfläche im Attribut von FlashCards schreiben.

Also, was sollen wir tun? Ich bin froh, dass du gefragt hast. Mavo hat Lösungen.

Speichern Sie Zwischenwerte mit Meta -Elementen

Einerseits wissen wir also, dass der Ausdruck [count(flashcards)] uns die Anzahl der Flashkarten gibt, wenn die Eigenschaften von Flash -Karten extern bewertet werden. Andererseits müssen wir das darin enthaltene Wert -Flash -Card -Attribut verwenden.

Um dieses Puzzle zu lösen, müssen wir die Anzahl der Flitzkarten in unserem Code bewerten und die Ergebnisse in irgendeiner Weise speichern, damit wir sie an anderer Stelle in der Anwendung verwenden können, um genau in den Flashcard -Eigenschaften zu sein. In diesem Fall gibt es in Mavo sogenannte Recheneigenschaften .

Um das Zwischenergebnis zu speichern, damit wir es verweisen können, benötigen wir das HTML -Element im Code. Es wird empfohlen, es für diesen Zweck zu verwenden<meta> Elemente, wie unten gezeigt:<meta content="[expression]" property="propertyName"> . Der Vorteil der Verwendung dieses Elements besteht darin, dass es außerhalb des Bearbeitungsmodus semantisch und visuell versteckt ist.

Denken Sie daran, dass berechnete Eigenschaften standardmäßig nicht gespeichert werden.

Fügen wir nun flashcardCount -Computereigenschaft in unserer Anwendung hinzu. Denken Sie daran, wir müssen es außerhalb des Attributs von Flashcard stellen, aber dann können wir es von überall verweisen:

 ...
<meta content="[count(flashcard)]" property="flashcardCount">
    ...

...

Es ist nur noch einen Schritt mehr, um die Implementierung der Selbstbewertungsfunktion zu vervollständigen: Wenn der Endbenutzer auf die Schaltfläche "OK" klickt, wird die entsprechende Flitzkarte bis zum Ende des Satzes verschoben, was der letzte wird. Fügen wir dem Code der Anwendung relevante Aktionen hinzu:

 ...
<meta content="[count(flashcard)]" property="flashcardCount">
  ...
  <button mv-action="move(this, flashcardCount)">Gut</button>

...

Wir sind fertig! Glückwunsch! ?

Es gibt eine andere Möglichkeit, diese Aufgabe zu lösen: mit Hilfe von $all besonderen Attribut . Wenn sich $all -Attribut in der Sammlung befindet, repräsentiert es die Sammlung selbst. Daher sind in diesem Fall keine berechneten Eigenschaften erforderlich. Versuchen Sie, die Lösung selbst zu implementieren.

Es gibt nur noch noch ein letztes, was wir reparieren müssen. Erinnern Sie sich an den Teil, den wir der App Statistiken hinzugefügt haben? Erinnern Sie sich an den Ausdruck, den wir erstellt haben, um die Anzahl der Karteikarten in der Anwendung zu bewerten: [count(flashcard)] ? Stattdessen können wir jetzt die von uns definierten berechneten Eigenschaften verwenden (und sollten). Nehmen Sie entsprechende Änderungen in der Anwendung vor.

abschließend

Was haben wir bisher gelernt? Lassen Sie uns es überprüfen. Um eine statische HTML -Seite in eine Mavo -Anwendung umzuwandeln, brauchen wir:

1. Auf der Seite Enthält teilweise Mavo JavaScript- und CSS -Dateien.
2. Fügen Sie dem Mavo-Rootelement mv-app -Attribut hinzu.
3. Sagen Sie Mavo, welche Elemente unserer Anwendung wichtig sind, indem Sie ihnen property hinzufügen.
4. Platzieren Sie mv-multiple -Attribut auf das Element, das kopiert und in eine Sammlung umgewandelt wird.
5. Sagen Sie Mavo, wo Sie unsere Daten speichern sollen, indem Sie das mv-storage -Attribut zum MAVO-Wurzel hinzufügen.
6. Entscheiden Sie, ob Mavo unsere Daten automatisch speichern soll. Wenn ja, fügen Sie die mv-autosave Eigenschaft zur Mavo-Wurzel hinzu. Wir wissen auch:
7. Die Mavo -Symbolleiste ist vollständig anpassbar. mv-bar -Eigenschaft steuert, welche Tasten angezeigt werden.
8. Mit Ausdrücken ermöglichen es uns, den aktuellen Wert des Attributs in anderen Elementen anzuzeigen und Berechnungen durchzuführen. Der Wert (und der Typ) eines Ausdrucks hängt davon ab, wo sich der Ausdruck im Code befindet. Mavos Expressionssyntax wird Mavoscript genannt.
9. Benutzerdefinierte Aktionen ermöglichen die Erstellung von Steuerelementen, die Daten auf benutzerdefinierte Weise ändern. Um benutzerdefinierte Aktionen für die entsprechenden Elemente innerhalb der Mavo-Anwendung zu definieren, legen Sie mv-action Eigenschaft fest.
10. Ein Attribut mit einem Wert eines Ausdrucks wird als berechnetes Attribut bezeichnet. Um das Zwischenergebnis so zu speichern, dass es an anderer Stelle in der Anwendung verwiesen werden kann, wird empfohlen, die Verwendung zu verwenden<meta> Element.

PostScript

Also haben wir unsere Bewerbung erstellt. Ist es perfekt? Natürlich nicht, nichts ist perfekt! Es gibt eine Menge zu verbessern, und es gibt viele Funktionen hinzuzufügen (wir können unsere App sogar mit Hilfe von Mavo mehrsprachig machen!). Gehen Sie weiter und verbessern Sie es weiter und zögern Sie nicht, etwas Neues auszuprobieren!

Bisher ist unser Wissen über Mavo nur die Spitze des Eisbergs, und es gibt noch viel mehr zu tun. Ich ermutige Sie, die Dokumentation sorgfältig zu lesen, die Beispiele (auf der Mavo -Website oder auf CodePen: Made von Lea Verou und einigen von mir) zu überprüfen und neue Inhalte zu erstellen! Viel Glück! ?

Anerkennung

Ich möchte den beiden großartigen Leuten danken. Zunächst möchte ich Lea Verou dafür danken, dass er mich nicht nur dazu inspiriert hat, dieses Tutorial zu schreiben (und mir bei der Implementierung zu helfen), sondern mich auch immer dazu inspiriert, die Webentwicklungswelt zu einem besseren Ort zu machen. Ich habe noch nie jemanden gesehen, der so talentiert ist und ich bin froh, die Gelegenheit zu haben, etwas mit ihr zu machen!

Ich danke auch James Moore. Die Beispiele, die er im Kurs "JavaScript Functional Programing for Anfängern" auf Udemy verwendet hat, veranlasste mich, meine eigene Version der Lernanwendung von Flashcards zu erstellen. Er ist ein großartiger Lehrer!

Das obige ist der detaillierte Inhalt vonLassen Sie Mavo beim Aufbau interaktiver Webanwendungen leuchten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!