django-components v Templating est désormais à égalité avec Vue ou React

Hé, je m'appelle Juro, je suis l'un des responsables des composants Django. Dans les versions v0.90 à 0.94, nous avons ajouté des fonctionnalités qui rendent l'utilisation des composants dans les modèles beaucoup plus flexible, similaire à JSX/Vue.

(Cette information est déjà un peu datée (publiée il y a un mois ; la dernière est la v0.101), car je suis en train d'ajouter la prise en charge des variables JS/CSS, TypeScript & Sass et des fragments HTML. Des trucs passionnants ! Mais je réalisé que je n'ai pas encore partagé cette mise à jour !)

Quoi qu'il en soit, ce qui suit est un composant blog_post, qui accepte un titre, un identifiant et des kwargs supplémentaires appliqués depuis blog_post_props :

    {% blog_post
      title="{{ person.first_name }} {{ person.last_name }}"
      id="{% random_int 10 20 %}"
      ...blog_post_props
    / %}

Ce qui précède est une combinaison de plusieurs fonctionnalités :

1. Balises à fermeture automatique :

Au lieu de

    {% component "my_component" %}
    {% endcomponent %}

Vous pouvez désormais simplement écrire

    {% component "my_component" / %}

2. Balises multilignes :

django_components configure désormais automatiquement Django pour autoriser les balises multilignes. Alors au lieu de tout mettre sur une seule ligne :

    {% component "blog_post" title="abcdef..." author="John Wick" date_published="2024-08-28" %}
    {% endcomponent %}

Vous pouvez le répartir sur plusieurs lignes :

    {% component "blog_post"
      title="abcdef..."
      author="John Wick"
      date_published="2024-08-28"
    / %}

3. Opérateur de diffusion :

De la même manière que l'opérateur ...props dans JSX ou v-bind dans Vue, cela insère des accessoires / kwargs dans une position donnée.

Donc au lieu de

    {% component "blog_post"
      title="abcdef..."
      author="John Wick"
      date_published="2024-08-28"
    / %}

Vous pouvez avoir les kwargs dans un dictionnaire, puis appliquer cela :

    # Python
    props = {
        "title": "abcdef...",
        "author": "John Wick",
        "date_published": "2024-08-28"
    }

    {# Django #}
    {% component "blog_post" ...props %}

4. Balises de modèle à l'intérieur des littéraux de chaîne dans les entrées de composants :

Vous pouvez désormais utiliser des balises de modèle et des filtres dans les entrées des composants :

    {% component 'blog_post'
      "As positional arg {# yay #}"
      title="{{ person.first_name }} {{ person.last_name }}"
      id="{% random_int 10 20 %}"
      readonly="{{ editable|not }}"
    / %}

De cette façon, vous n'avez pas besoin de définir des variables supplémentaires à chaque fois que vous devez formater une valeur.

Notez que lorsqu'il n'y a qu'une seule balise et aucun texte supplémentaire autour, le résultat est transmis sous forme de valeur. Ainsi, "{% random_int 10 20 %}" transmet un nombre et "{{ editable|not }}" transmet un booléen.

Vous pouvez même aller plus loin et vivre une expérience similaire à Vue ou React, où vous pouvez évaluer des expressions de code arbitraires, AKA similaires à celle-ci :

    <MyForm
      value={ isEnabled ? inputValue : null }
    />

Cela peut être possible avec django-expr, qui ajoute une balise expr et un filtre que vous pouvez utiliser pour évaluer les expressions Python à partir du modèle :

    {% component "my_form"
      value="{% expr 'input_value if is_enabled else None' %}"
    / %}

5. Prise en charge de {% comp_name %} {% endcomp_name %} et TagFormatter

Par défaut, les composants sont écrits à l'aide de la balise composant, suivie du nom du composant :

    {% component "button" href="..." disabled %}
        Click me!
    {% endcomponent %}

Vous pouvez maintenant changer cela (et même créer le vôtre !).

Par exemple, définir COMPONENTS.tag_formatter sur "django_components.shorthand_component_formatter" vous permet d'écrire des composants comme ceci :

    {% button href="..." disabled %}
        Click me!
    {% endbutton %}

Beaucoup d'autres choses sont à venir, alors assurez-vous d'essayer Django-Components !

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!