Laissez Mavo briller dans la création d'applications Web interactives

Ce tutoriel plongera dans Mavo: un moyen pratique et facile à utiliser pour créer des applications Web complexes, réactives et persistantes en écrivant HTML et CSS sans une ligne de code JavaScript ou de backend serveur.

Mavo est développé par le groupe de back de foin à CSAIL au MIT et dirigé par Lea Verou.

Nous allons créer conjointement une application de cartes flash pour l'apprentissage des langues étrangères . Il s'agit d'une application crud entièrement fonctionnelle qui vous permet de:

• Créez, supprimez, mettez à jour les cartes flash et réorganisez-les par glisser-déposer.
• Importer et exporter des cartes flash.
• Évaluez votre niveau de maîtrise des mots sur les cartes flash.

Voici à quoi l'application nous avons remplie est apparue:

Dans ce tutoriel, je vous guiderai tout au long du processus de création de votre application.

À la fin de certaines étapes, je vous donnerai des conseils pour essayer d'utiliser Mavo - en savoir plus - et apporter des améliorations à l'application que nous construisons.

Prêt? Commençons! ?

Modèles statiques

Pour illustrer comment Mavo améliore le HTML standard, nous allons d'abord créer une page HTML statique pure, puis utiliser Mavo pour convertir ce HTML statique en une application Web entièrement fonctionnelle.

Supposons que nous soyons dans le code HTML suivant:

<h1 id="Carte-flash"> Carte flash</h1>
<main><p>Mots ou phrases</p>
  <p>traduire</p>
</main>

Dans ce code,<main></main> Les éléments représentent une seule carte flash .

Ajoutons quelques styles pour faire en sorte que notre HTML ressemble plus à une application de cartes flash réelle. Vous pouvez afficher le code source et l'utiliser ici.

Commencez avec Mavo

Maintenant, nous n'avons que des modèles statiques. Il est temps d'ajouter des fonctionnalités afin qu'il puisse vraiment fonctionner comme une application FlashCard. Mavo fait des débuts brillants!

Afin d'utiliser Mavo, nous devons d'abord Contient partiellement ses fichiers JavaScript et CSS:

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

Vous devrez peut-être prendre en charge les navigateurs plus anciens ou vous souhaitez pouvoir lire le code? Vous pouvez personnaliser la version et créer que vous utilisez en répondant à plusieurs questions.

Définir les applications Mavo

Pour activer la fonctionnalité Mavo sur la structure HTML, nous devons utiliser l'attribut mv-app sur l'élément qui contient l'application Mavo (il peut même être ou Éléments, tous sont OK! ). Sa valeur est l'ID de l'application et doit être unique dans la page. Si nous utilisons <code>mv-app sans valeurs et qu'il n'y a pas d'attribut id ou name sur le même élément, des noms tels que mavo1 , mavo2 , etc. seront générés automatiquement.

Cependant, il est fortement recommandé de nommer l'application Mavo, car son nom sera utilisé à de nombreux endroits.

Considérer<main></main> L'élément représente notre application MAVO, ajoutons l'attribut mv-app et spécifions les "flashcards" de l'ID pour notre application:

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

Attributs d'attribut

Il est temps de dire à Mavo quels éléments d'application sont importants , c'est-à-dire quels éléments nous voulons être modifiables et enregistrés.

Maintenant, nous avons deux de ces éléments, ils sont<p> élément. Ajoutons des attributs <code>property à ces éléments pour dire à Mavo qu'ils contiennent des données. Un élément avec property est appelé une propriété .

Nous pouvons mettre property sur n'importe quel élément HTML5 et Mavo sait comment le rendre modifiable. Par exemple,<input> , vous pouvez modifier son contenu, mais<time></time> Vous permet de modifier sa date / heure avec le sélecteur de date / heure approprié.

Vous pouvez également étendre cet ensemble de règles via des plugins et rendre les éléments modifiables de nouvelles façons (par exemple, texte riche).

N'oubliez pas que la valeur de property doit décrire l'élément similaire à id ou class :

 ...

  <p property="source">Mots ou phrases</p>
  <p property="translation">traduire</p>

...

Si vous avez déjà class , id ou itemprop qui décrit entièrement l'élément, vous pouvez utiliser property sans valeur, telle que property="source" .

Avez-vous remarqué des modifications dans notre application? Une barre d'outils Mavo avec un bouton d'édition apparaît en haut de la page. Le bouton d'édition permet à l'utilisateur de basculer entre les modes de lecture et d'édition. Maintenant, notre application est en mode de lecture. Cela signifie que nous ne pouvons pas modifier les données sur la page.

La barre d'outils Mavo est entièrement personnalisable , et il est vrai que presque toutes les UIS générées par Mavo: vous pouvez modifier son emplacement, supprimer son style par défaut, ajouter des éléments de bouton personnalisés ou utiliser vos propres éléments HTML, etc.

Nous verrons un exemple personnalisé comme celui-ci plus tard dans ce tutoriel.

Visitez cette section du site Web de Mavo pour en savoir plus.

Passons maintenant au mode Modifier en cliquant sur le bouton Modifier . Qu'est-ce qui a changé? Le texte du bouton d'édition devient édition pour indiquer que nous sommes en mode d'édition. Si vous survolez les paragraphes, Mavo vous dit que vous pouvez cliquer pour les modifier en les mettant en évidence en jaune. Commençons! Cliquez sur le texte et modifiez-le. Ouah! Nous pouvons modifier le contenu directement sur la page!

Supposons qu'en plus des mots et de leurs traductions, la carte flash doit également contenir un exemple de la façon dont les mots sont utilisés dans une phrase. Améliorez l'application en ajoutant des éléments correspondants à la carte flash.

Attribut mv-multiple

Actuellement, il n'y a qu'une seule carte flash dans notre application. C'est inutile! Pour une application de cartes flash efficace, nous devons être capables d'ajouter, de supprimer et de réorganiser les flashcards. Comment pouvons-nous faire cela? Nous pouvons ajouter plus au code<main></main> Éléments pour créer plus de cartes flash, mais comment les utilisateurs finaux créent et suppriment les cartes flash?

Heureusement, Mavo fournit quelque chose qui en fait un jeu d'enfant: mv-multiple , qui dit à Mavo que certains éléments peuvent être copiés . Il convertit les éléments qu'il utilise en une collection modifiable d'articles et génère des UIS (personnalisables) pour ajouter, supprimer et réorganiser les éléments.

Si vous utilisez mv-multiple sur un élément sans attribut property , Mavo ajoutera automatiquement property="collection" (ou collection2 , collection3 , etc. pour rendre le nom unique). Cependant, il est recommandé d'utiliser également property propriété, de nommer votre collection et de vous assurer que votre HTML change pour préserver ses données.

Converons nos cartes flash solitaires en collections de cartes flash à l'aide de l'attribut mv-multiple dans notre application:

 ...    
  <main mv-app="flashcards" mv-multiple>
    <p property="source">Mots ou phrases</p>
    <p property="translation">traduire</p>
  </main>

Vous pouvez également spécifier le nom de la propriété comme valeur de mv-multiple , tel que mv-multiple="flashcards" .

mv-multiple est situé sur l'élément à copier, et non sur le conteneur de la collection. L'une des erreurs que les gens font est d'utiliser<main mv-multiple></main> Plutôt<main></main>

, et généralement pas découvert pendant longtemps avant de vérifier l'élément ou le style pour le rendre évident. Passez maintenant l'application en mode modification. Veuillez noter que sous la carte flash, il y a maintenant un bouton Ajouter une carte flash . Essayons-le: utilisez ce bouton pour créer des cartes flash. Maintenant, nous pouvons ajouter dynamiquement de nouveaux éléments directement dans l'application, même s'il n'y a pas d'élément correspondant dans le HTML. Mais ce n'est pas tout!

Veuillez noter que<main></main> property sur la propriété ne fait pas réellement l'ensemble<main></main> Les éléments sont modifiables, mais agissent plutôt comme des éléments de regroupement . Cela se produit lorsque vous utilisez des propriétés property sur des éléments contenant d'autres propriétés. Essayez de planer votre souris sur la carte flash et de faire attention aux trois boutons apparaissant dans son coin supérieur droit pour ajouter , supprimer et réorganiser les éléments par des poignées de glisser-déposer. En survolant n'importe quel bouton de barre d'articles, nous pouvons comprendre à quelle carte flash correspond à: Mavo le mettra en surbrillance. N'est-ce pas très magique?

Vous pouvez personnaliser n'importe quel élément d'interface utilisateur généré par Mavo, par exemple, vous pouvez créer votre propre poignée de glisser en utilisant la classe mv-drag-handle .

Les boutons ajoutés à chaque élément de la collection sont également accessibles via le clavier . Même réorganiser: vous pouvez vous concentrer sur la poignée de glisser et utiliser les touches fléchées pour déplacer l'élément.

Attribut mv-storage

Maintenant que nous avons l'interface utilisateur de base, essayons ce qui suit:

• Passez en mode édition (si vous ne l'avez pas encore fait).
• Modifiez les mots source et les traductions de la première carte flash. Ajoutez quelques cartes flash.
• Passez l'application en mode de lecture.
• Enfin ... actualisez la page.

Quoi? ! Où sont passés nos données? Mavo ne devrait-il pas le sauver? ce qui s'est passé?

En fait, nous n'avons jamais dit à Mavo si ou où stocker nos données!

Pour ce faire, nous devons utiliser la propriété mv-storage . Quels choix avons-nous? Eh bien, Mavo ouvre d'énormes possibilités pour nous, et le plugin Mavo ouvre encore plus de possibilités!

Dans notre application, nous stockons les données dans le localstorage du navigateur, qui est l'une des options les plus faciles, il est donc parfait pour notre première application Mavo. Nous avons juste besoin d'ajouter l' mv-app mv-storage avec la valeur local sur l'élément (également appelé Root Mavo ).

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

Jetez un œil à la barre d'outils Mavo. Avez-vous remarqué quelque chose? Un autre bouton apparaît - le bouton Enregistrer .

Essayez à nouveau de modifier les données d'application. Notez que le bouton Enregistrer est maintenant mis en surbrillance . Survolez le bouton de sauvegarde et Mavo mettra en évidence les propriétés avec des données non enregistrées . N'est-ce pas cool?

Cliquez sur le bouton Enregistrer et actualisez la page (pas besoin de passer en mode de lecture avant de rafraîchir la page). Vos données sont-elles toujours là? Très bien! Nous sommes à un pas de plus de notre objectif - une application FlashCard entièrement tractée.

propriété mv-autosave

Devons-nous maintenant cliquer sur le bouton Enregistrer chaque fois que nous devons enregistrer des données? Cela peut être plus sûr et empêche les données précieuses d'être endommagées, mais cela peut souvent être gênant. Pouvons-nous enregistrer automatiquement les données? certainement! Pour enregistrer automatiquement les données chaque fois que nous les modifions, nous pouvons utiliser la propriété mv-autosave sur l'élément racine Mavo. Sa valeur est le nombre de secondes enregistrées par la limitation. Ajoutons mv-autosave="3" à l'élément racine de l'application:

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

Si mv-autosave="3" , Mavo ne peut être enregistré qu'une fois toutes les trois secondes au maximum. Ceci est particulièrement utile pour les backends qui gardent l'historique du changement (par exemple, GitHub , Dropbox ) pour prévenir les inondations, ce qui rend cette histoire inutile.

Pour désactiver la limitation et enregistrer immédiatement, nous pouvons utiliser mv-autosave="0" ou simplement utiliser mv-autosave , qui supprime également le bouton de sauvegarde de l'interface utilisateur (car il est inutile dans ce cas).

Modifiez à nouveau les données et affichez le bouton Enregistrer . L'avez-vous vu? Au début, il a été mis en évidence, mais après 3 secondes - il n'a pas été mis en évidence. Toutes nos données sont désormais enregistrées automatiquement!

Alors maintenant, la partie principale de notre application ressemble à ceci:

<main mv-app="flashcards" mv-autosave="3" mv-storage="local"><p property="source"> Mots ou phrases</p>
        <p property="translation">traduire</p>
      </main>

Nous avons presque terminé la version alpha de l'application. Maintenant, c'est à votre tour d'améliorer l'application. Ne vous inquiétez pas, vous avez toutes les connaissances dont vous avez besoin.

Améliorez l'application afin que les cartes flash puissent être organisées par l'utilisateur final en différents groupes liés à divers sujets, par exemple, l'utilisateur peut collecter toutes les cartes flash liées à des vêtements en un groupe, tous les ustensiles de cuisine en un autre groupe, etc.

?indice!

Il existe de nombreuses façons d'y parvenir, selon ce que vous décidez de suivre. Cependant, j'espère que vous pensez à certaines questions avant de continuer:

1. Quels éléments HTML utiliserez-vous comme groupes de regroupement ? Il serait pratique si l'utilisateur peut voir le nom du deck flash (nom de thème) et peut effondrer le groupe au titre.
2. Quelles propriétés Mavo allez-vous ajouter à cet élément (le cas échéant)? Cet élément sera-t-il un attribut ou une collection ?
3. Les utilisateurs finaux peuvent-ils ajouter de nouveaux sujets, les supprimer et les réorganiser, modifier les titres de sujet et déplacer des cartes flash entre les sujets?

Si vous décidez de ne pas organiser les cartes flash par groupe, mais que les étiquetez plutôt avec des étiquettes correspondant à divers sujets, c'est bien. La solution utilisant des balises convient également. Pour la pratique, essayez de terminer cette méthode.

Attribut mv-bar

Parce que nos applications stocke les données localement, par défaut, les utilisateurs de l'application ne pourront pas partager leurs cartes avec d'autres utilisateurs. Ne serait-ce pas génial si nous leur permettons d'exporter leurs cartes flash et d'importer des cartes flashs des autres? Heureusement, ces fonctionnalités sont déjà implémentées dans Mavo et nous pouvons facilement les ajouter à notre application!

mv-bar contrôle les boutons (le cas échéant) s'affichent dans la barre d'outils. Il est généralement spécifié sur la racine Mavo (élément avec l'attribut mv-app ). Les boutons sont représentés par leurs ID (très logique): modifier, importer, exporter, etc.

Étant donné que nous voulons ajouter que quelques boutons à la collection par défaut, nous pouvons utiliser ce qu'on appelle la syntaxe relative , qui nous permet d'ajouter et de supprimer des boutons à la collection par défaut sans répertorier explicitement. Nous avons juste besoin de commencer par le mot-clé with la valeur de mv-bar .

Ce faisant, nous obtiendrons ce qui suit:

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

Essayez ces fonctionnalités: ajoutez des cartes flash et essayez de les exporter dans un fichier. Supprimez ensuite la carte flash existante et importez la carte Flash à partir du fichier précédemment exporté.

Expressions et mavoscript

Ajoutons maintenant des statistiques à notre application, comme le nombre de cartes flash! Cela semble-t-il intéressant? Je l'espère. ?

Pour ce faire, nous devons apprendre quelque chose de nouveau sur Mavo.

Nous pouvons nous référer dynamiquement à la valeur de toute propriété que nous définissons n'importe où dans notre application Mavo (y compris dans les propriétés HTML) en mettant son nom dans des crochets comme ceci: [propertyName] . Voici un exemple d'une expression simple qui nous permet de calculer les choses dynamiquement et de réagir lorsqu'elles changent.

La syntaxe d'expression de Mavo est appelée Mavoscript . Il est similaire à une formule de feuille de calcul, nous permettant d'effectuer des calculs et d'autres opérations (en utilisant des nombres, du texte, des listes, etc.), mais est conçu pour être plus facile à lire et à s'adapter aux relations imbriquées. Vous pouvez en savoir plus sur les expressions Mavo et Mavoscript dans la documentation.

Essayons maintenant, ajoutons l'expression [source] à l'intérieur de l'attribut FlashCard, par exemple, entre deux propriétés: source et traduction.

 ...
  <p property="source">Mots ou phrases</p>
  [source]
  <p property="translation">traduire</p>
...

Qu'est-ce qui a changé dans notre application? La valeur de l'attribut Source FlashCard est désormais affichée deux fois sur la page.

Passez en mode modification et essayez de modifier la valeur de l'attribut source. L'avez-vous vu? Le contenu de la page sera mis à jour lorsque vous modifierez la valeur d'attribut! C'est pourquoi j'ai déjà dit que Mavo nous permet de développer des applications Web réactives.

C'est vraiment cool, mais malheureusement, dans notre cas, cela ne fonctionne pas beaucoup: nous ne pouvons pas utiliser cette expression pour calculer le nombre de cartes flash - nous n'avons toujours qu'une seule valeur .

Que se passe-t-il si nous mettons l'expression [source] en dehors de l'attribut FlashCard? Nous obtiendrons ce qui suit:

 ...
  [source]

    ...

...

En quoi est-ce différent des cas précédents? Pour voir les différences, si vous ne l'avez pas fait, ajoutez des flashcards. Maintenant, nous ne sommes pas une valeur , mais une liste de valeurs séparée par des virgules : propriétés source pour toutes les cartes flash. C'est exactement ce que nous recherchons toujours: le nombre d'éléments dans la liste correspond au nombre de cartes flash dans l'application.

Est-ce que cela a du sens? Oui, mais ne serait-il pas plus logique si nous calculons le nombre de cartes flash au lieu du nombre de valeurs de son attribut source? Après tout, la carte flash supplémentaire existe avant même de remplir sa source ou sa traduction. Je vous suggère de faire ce qui suit: Remplacement de l'expression [source] par [flashcard] :

 ...
  [flashcard]

    ...

...

Avez-vous remarqué la différence? Nous avons toujours une liste, mais sa valeur n'est pas une valeur simple, mais un objet , c'est-à-dire une valeur complexe contenant toutes les données associées à chaque carte flash. La bonne nouvelle est que le nombre de ces objets est égal au nombre de cartes flash, car chaque carte flash en a une, même si elle est complètement vide. Donc, maintenant nous avons un objet pour chaque carte flash, mais comment les calculons-nous et affichons-nous le total?

Maintenant, familiarisons la fonction Mavoscript et trouvons la fonction qui nous permet de calculer le nombre de cartes flash. N'oubliez pas que nous avons une liste de cartes flash , nous devons donc trouver une fonction qui nous permet de calculer le nombre d'éléments dans la liste . C'est ici - c'est ainsi que la fonction count() le fait!

Mais comment utilisons-nous les fonctions dans les expressions? À quels règles devons-nous prêter attention? Oui, il y en a plusieurs:

1. Les expressions sont représentées à des crochets.
2. Ne nichez pas les supports.

Essayons d'utiliser la fonction count() pour calculer le nombre de cartes flash:

 ...
[count (flashcard)]

  ...

...

C'est exactement ce que nous recherchons - maintenant il y a des statistiques dans notre application! N'est-ce pas cool?

J'espère que vous avez été réchauffé et prêt à continuer d'essayer Mavo.

Améliorez l'application afin que non seulement affiche des statistiques sur le nombre total de cartes flash dans l'application, mais également des statistiques sur le nombre de cartes flash dans chaque sujet, le cas échéant.

?indice!
Vous souhaitez filtrer les listes en fonction de certains critères? where vous aidera.

Fonction d'auto-évaluation

Nous avons déjà une application qui nous permet de créer, éditer et stocker plusieurs cartes flash. Mais comment suivre les cartes flash que nous avons apprises et quelles cartes flash nécessitent plus de pratique? Toute application respectable FlashCard nécessite une fonction d'auto-évaluation. Voyons comment nous l'ajoutons!

Supposons que dans notre application, nous avons deux boutons pour l'auto-évaluation: pauvres et bons. Que voulons-nous se produire chaque fois que l'utilisateur final clique sur un bouton? Eh bien, cette idée est simple:

• En cliquant sur le bouton "Mauvais", indiquera que l'utilisateur n'a pas encore appris le mot et nous voulons que notre application déplace la carte flash correspondante au début de la liste afin qu'il puisse le voir dès que possible après avoir lancé l'application.
• Cliquer sur le bouton "OK" indiquera que l'utilisateur a appris le mot, et la carte flash correspondante doit être déplacée à la fin de la liste pour leur permettre d'utiliser d'autres cartes flash qu'ils n'ont pas encore apprises.

"Êtes-vous sûr que nous pouvons faire cela sans JavaScript?" Vous pourriez demander. Oui! Mavo est très puissant et peut nous fournir tous les outils dont nous avons besoin!

Maintenant que nous savons ce que nous allons implémenter, configurons d'abord l'interface utilisateur et passons à l'étape suivante. Notre balise ressemble à ceci:

 ...

  ...
  <h2 id="Vous-évaluer">Vous évaluer</h2>
    <button>Différence</button>
    <button>bien</button>


...

Attribut mv-action

Les opérations Mavo nous permettent de créer nos propres contrôles qui modifient les données de manière personnalisée lorsque l'utilisateur interagit avec eux. Cela semble prometteur, non?

Pour définir des actions personnalisées, nous devons utiliser l'attribut mv-action sur les éléments correspondants de l'application Mavo. Ceci est effectué chaque fois que l'élément est cliqué. C'est exactement ce que nous recherchons toujours.

pour<form> Élément, les actions personnalisées sont effectuées lorsque le formulaire <em>est soumis</em> . La valeur de <code>mv-action est une expression. Nous pouvons utiliser toutes les fonctions d'expression et la syntaxe qui nous est fournie par Mavoscript, ainsi que certaines autres fonctions pour faciliter la manipulation des données, telles que add() , set() , move() ou delete() . Il est important de noter que contrairement aux expressions ordinaires qui sont calculées de manière réactive, ces expressions ne sont calculées que chaque fois que l'opération est déclenchée.

Mavo s'attend à ce que la valeur de mv-action soit une expression, il n'est donc pas nécessaire de l'enfermer entre parenthèses : mv-action="expression" . De plus, si nous les incluons, ils seront traités comme des parties de l'expression.

Par conséquent, nous devons déplacer les cartes flash dans la collection, et Mavo a une fonction appropriée qui nous permet de le faire - move() . Son premier paramètre fait référence à l'élément que nous déplaçons, et le deuxième paramètre est sa position dans la collection. N'oubliez pas que les éléments d'une collection commencent à partir de 0.

Pour plus d'informations sur les fonctions move (et leurs variantes) et les actions personnalisées, consultez la documentation.

Implémentons le premier point du contour dont nous avons discuté précédemment: pendant l'auto-évaluation, l'utilisateur final clique sur le bouton "Mauvre" et la carte flash correspondante se déplacera au début de l'ensemble, qui est le premier. Donc, dans le code, nous avons:

 ...

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

...

Notez que dans la propriété mv-action , nous faisons référence à l'attribut FlashCard à l'intérieur de l'attribut car nous voulons traiter la carte flash actuelle .

Si nous essayons de mettre en œuvre le deuxième point du contour, nous serons confrontés à un problème. Pouvez-vous suggérer quel est exactement le problème?

N'oublions pas que si l'utilisateur final clique sur le bouton "OK", la carte flash correspondante se déplacera à la fin de la collection, qui est la dernière. Pour que FlashCards soit le dernier de l'ensemble, nous devons connaître le nombre d'éléments dans l'ensemble.

Heureusement, nous avons déjà résolu cette tâche et implémenté les fonctions correspondantes. Mais pouvons-nous utiliser cette solution pour résoudre notre problème actuel? Malheureusement, nous ne pouvons pas: comme nous le savons déjà, nous ne pouvons faire référence à la collection de cartes flash (et évaluer sa taille) à l'extérieur des propriétés de cartes flash. Mais dans notre cas, nous devons le faire: nous devons écrire l'expression du "bon" bouton à l'intérieur de l'attribut FlashCard.

Alors que devons-nous faire? Je suis content que vous ayez demandé. Mavo a des solutions.

Enregistrer les valeurs intermédiaires à l'aide de méta-éléments

Ainsi, d'une part, nous savons que l'expression [count(flashcards)] nous donnera le nombre de cartes flash lors de l'évaluation des propriétés de cartes flash externe . D'un autre côté, nous devons y utiliser l'attribut FlashCard de valeur.

Pour résoudre ce puzzle, nous devons évaluer le nombre de cartes flash dans notre code et enregistrer les résultats d'une manière ou d'une autre afin que nous puissions l'utiliser ailleurs dans l'application, pour être précis à l'intérieur des propriétés FlashCard. Dans ce cas, dans Mavo, il existe des propriétés dites de calcul .

Pour enregistrer le résultat intermédiaire afin que nous puissions le référencer, nous avons besoin de l'élément HTML dans le code. Il est recommandé de l'utiliser à cet effet<meta> Éléments, comme indiqué ci-dessous:<meta content="[expression]" property="propertyName"> . L'avantage de l'utilisation de cet élément est qu'il est caché en dehors du mode d'édition, sémantiquement et visuellement.

N'oubliez pas que les propriétés calculées ne sont pas enregistrées par défaut.

Ajoutons maintenant flashcardCount dans notre application. N'oubliez pas que nous devons le mettre en dehors de l'attribut FlashCard, mais nous pouvons ensuite le référencer de n'importe où:

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

...

Il ne reste qu'une étape pour terminer la mise en œuvre de la fonction d'auto-évaluation: si l'utilisateur final clique sur le bouton "OK", la carte flash correspondante sera déplacée à la fin de l'ensemble, qui deviendra la dernière. Ajoutons des actions pertinentes au code de l'application:

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

...

Nous avons fini! Félicitations! ?

Il existe un autre moyen de résoudre cette tâche: avec l'aide de $all Special Attribut . Si $all se trouve à l'intérieur de la collection , il représente la collection elle-même. Par conséquent, aucune propriété calculée n'est requise dans ce cas. Essayez d'implémenter la solution vous-même.

Il ne reste qu'une dernière chose que nous devons corriger. Vous vous souvenez de la pièce que nous avons ajouté des statistiques à l'application? Rappelez-vous l'expression que nous avons construite pour évaluer le nombre de cartes flash dans l'application: [count(flashcard)] ? Au lieu de cela, nous pouvons maintenant utiliser (et utiliser) les propriétés calculées que nous avons définies. Apporter des modifications correspondantes dans l'application.

en conclusion

Alors qu'avons-nous appris jusqu'à présent? Prenons-le. Afin de convertir n'importe quelle page HTML statique en une application Mavo, nous avons besoin:

1. Sur la page Contient partiellement les fichiers Mavo JavaScript et CSS.
2. Ajoutez l'attribut mv-app à l'élément racine Mavo.
3. Dites à Mavo quels éléments de notre application sont importants en leur ajoutant des attributs property .
4. Placez mv-multiple sur l'élément qui sera copié et converti en collection.
5. Dites à Mavo où stocker nos données en ajoutant l'attribut mv-storage à la racine Mavo.
6. Décidez si Mavo devrait enregistrer automatiquement nos données. Si c'est le cas, ajoutez la propriété mv-autosave à la racine Mavo. Nous savons également:
7. La barre d'outils Mavo est entièrement personnalisable. mv-bar contrôle les boutons qui seront affichés.
8. Les expressions nous permettent d'afficher la valeur actuelle de l'attribut dans d'autres éléments et d'effectuer des calculs. La valeur (et le type) d'une expression dépend de l'endroit où l'expression se trouve dans le code. La syntaxe d'expression de Mavo est appelée Mavoscript.
9. Les actions personnalisées permettent la création de contrôles qui modifient les données de manière personnalisée. Pour définir des actions personnalisées sur les éléments correspondants dans l'application MAVO, définissez mv-action .
10. Un attribut avec une valeur d'expression est appelé un attribut calculé. Pour enregistrer le résultat intermédiaire afin qu'il puisse être référencé ailleurs dans l'application, il est recommandé d'utiliser<meta> élément.

post-scriptum

Nous avons donc construit notre application. Est-ce parfait? Bien sûr que non, rien n'est parfait! Il y a beaucoup à améliorer, et il y a beaucoup de fonctionnalités à ajouter (nous pouvons même multilinaliser notre application à l'aide de Mavo!). Allez-y et améliorez-le davantage et n'hésitez pas à essayer quelque chose de nouveau!

Jusqu'à présent, notre connaissance de Mavo n'est que la pointe de l'iceberg, et il y a beaucoup plus à faire. Je vous encourage à lire attentivement la documentation, à vérifier les exemples (sur le site Web de Mavo, ou sur Codepen: Made by Lea Verou et certains fabriqués par moi-même), et à créer de nouveaux contenus! Bonne chance! ?

Remerciements

Je tiens à remercier les deux personnes formidables. Tout d'abord, je tiens à remercier Lea Verou de m'avoir non seulement inspiré à écrire ce tutoriel (et à m'aider à la mettre en œuvre), mais à m'inspirer toujours pour faire du monde du développement Web un meilleur endroit. Je n'ai jamais vu quelqu'un d'aussi talentueux et je suis content d'avoir l'occasion de faire quelque chose avec elle!

Je remercie également James Moore. Les exemples qu'il a utilisés dans le cours "JavaScript Functional Programming for Beginners" sur Udemy m'a incité à faire ma propre version de l'application d'apprentissage FlashCard. C'est un grand professeur!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!