Apprenez les balises de modèle lors de la création de formulaires interactifs dans un composant Web (Learn Modulo.js - Partie f

? Hey all, welcome back this week! Each tutorial is self-contained, so feel free to start at the beginning, or just plunge in here.

Note: Due to a bug with Dev.To, I'm unable to publish this tutorial normally. The fenced code blocks do not support template syntax, causing the markdown parser to crash.

Introducing: The NewsletterSubscribe Component

In Part 6, we'll be creating a custom, interactive sign-up form that only shows the newsletters to subscribe when the user chooses. This will give us practice with some very useful techniques, while building up our knowledge of template-tags, a core concept in templating.

Starting snippet

In this tutorial, we will start with Props, just like with the PictureFrame component in Part 2.

As with previous tutorials, you can simply copy and paste this code into any HTML file to start:

<template Modulo>
    <Component name="NewsletterSubscribe">
        <Template>
            <form method="POST">
                <h2>Learn Modulo.js - Sign-Up Component</h2>
                <label><strong>Email:</strong><input [state.bind] name="email" /></label>
                <label>
                    <input [state.bind] name="subscribe" type="checkbox" />
                    I want to subscribe to receive news and special offers
                </label>
                <label>
                    <input [state.bind] name="newsletters.kombucha" type="checkbox" />
                    Kombucha Enthusiast Newsletter
                </label>
                <button>Submit</button>
            </form>
        </Template>
        <State
            email=""
            subscribe:=false
            newsletters:={}
            newsletters.kombucha:=true
            newsletters.soda:=false
            newsletters.wine:=true
            newsletters.beer:=false
        ></State>
    </Component>
</template>
<script src="https://unpkg.com/mdu.js"></script>
<x-NewsletterSubscribe></x-NewsletterSubscribe>

Important things to note: Look at how "State" is set-up. Do you see how newsletters:={} assigns to a JavaScript Object (designated with {}), and how then kombucha, soda, wine, and beer are all assigned with the syntax newsletters.kombucha, etc? This creates an Object that ends up looking like: { "kombucha": true, "soda": false ... }. This is a short-hand in Modulo for creating such objects. Also, note how name="newsletters.kombucha" must specify the full name, including the dot (.), to access that true/false value.

Introducing Part 6: Template Tags

In addition to filters, the Modulo templating language also support powerful "template tags", which allow for more complicated custom behavior. This includes the next two topics in this tutorial: "if" template-tag, which allows for conditional rendering (e.g. "only show the submit button if a form is filled correctly", or "only show the modal if the user has clicked the button"), and the "for" template-tag, which allows for HTML to be repeated for each item of some given data (e.g. "every blog post gets it's own

element", or "every field of data gets it's own form field").

Syntax

Unlike template variables or filters, they use {% and %} (instead of {{ and }}) to designate where they are in the Template code. Template tags are in the format of {% tag %}. They allow for more complicated transformations to the HTML code generated. For example, here are a few: {% include other_template %} {% comment %} ... {% endcomment %}

The if-tag

One of the most useful template tags you will use is the if tag, written like this: {% if %}. The if-tag allows for conditional rendering of HTML code based on the condition supplied.

See below for two examples of using the "if" tag:

{% if state.expanded %}

Details: {{ props.details }}

{% endif %}
{% si props.link %}
En savoir plus...
{% autre %}
(Aucun lien fourni)
{% endif %}

Notez qu'il y a deux autres balises dans le mix. Ceux-ci sont liés à la balise if et n'apparaîtront qu'après la balise if. La première est la balise {% endif %}. Ceci est obligatoire, car il montre à Modulo ce que vous souhaitez que la balise if inclue conditionnellement. La seconde est la balise {% else %}. Le {% else %} est facultatif, comme en témoigne le premier exemple : vous n'en avez pas besoin pour toutes les utilisations de la balise if.

Étape 1 : afficher éventuellement la case à cocher Kombucha

Commençons par une instruction if basée sur state.subscribe. La logique est que si l'utilisateur ne souhaite pas du tout s'abonner, nous ne devrions même pas afficher les options supplémentaires de la newsletter. Nous pouvons y parvenir avec ce qui suit :

{% if state.subscribe %}
<étiquette>

Newsletter des passionnés de Kombucha

{% endif %}

Cela affichera désormais uniquement l'option permettant de choisir la newsletter lorsque vous cliquez sur « s'abonner ».

Étape 2 : Utilisez « autre » pour afficher un indice sur la manière de remplir l'e-mail.

Maintenant, entraînons-nous à utiliser une instruction if plus complexe pour afficher un indice au lieu du bouton du formulaire « s'abonner », jusqu'à ce qu'ils commencent à taper quelques caractères. Les e-mails ne devraient (probablement) jamais être inférieurs à 4 caractères, utilisons donc cela comme seuil. Nous pouvons utiliser l'opérateur lt (inférieur à, alias <) pour comparer. Voir ci-dessous :

{% si state.email|longueur lt 4 %}

Indice : Commencez par saisir votre adresse e-mail

{% autre %}
(... le formulaire d'abonnement va ici...)
{% endif %}

Étape 3 : Utilisez la boucle for pour lister les newsletters

Commençons par un simple "test" de boucle for, puis nous le développerons à l'étape suivante :

{% pour la clé, valeur dans state.newsletters %}

{{ clé }}

{% fin pour %}

Remarque importante : Mettez toujours vos balises de modèle à l'intérieur de vos valeurs HTML ! Ne faites pas quelque chose comme {% if value %}style="color: blue"{% endif %}, faites plutôt style="{% if value %}color: blue{% endif %}". Sinon, les {% et autres pourraient être interprétés comme des attributs sans valeur, votre code étant jonché de {%="".

Étape 4 : rajout de l'entrée

Cela parcourra chaque newsletter et la rendra verte si « valeur » est vraie. Cependant, cela ne créera pas d'entrées à bascule. Nous devrons utiliser la propriété {{ key }} à l'intérieur de l'attribut name=. Examinez l'ajustement suivant de l'entrée :

Mettez ceci dans la boucle for, et il générera automatiquement des cases à cocher, quel que soit le nombre de newsletters que vous pourriez avoir !

- Exemple complet

Enfin, nous mettons le tout ensemble, ajoutons d'abord un |cap pour le formatage, et ajoutons une partie Style avec un style très basique, pour rendre le formulaire un peu meilleur, et nous nous retrouvons avec le résultats finaux. N'hésitez pas à copier et coller ce qui suit pour l'essayer :

En raison d'un bug avec Dev.To, je ne peux pas inclure le code source. Cependant, vous pouvez le voir dans l'essentiel suivant :

https://gist.github.com/michaelpb/9bac99ba0985859742961c3d1e1f310a

Conclusion

Dans cette section, nous nous entraînons à utiliser des template-tags pour créer des formulaires plus conviviaux. Dans le prochain didacticiel, nous commencerons à explorer certaines des forces de Modulo, avec les types de données, StaticData et l'intégration d'API, alors assurez-vous de suivre pour apprendre à écrire du code déclaratif pour connecter des API en un seul clic. quelques lignes !

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!