django-components v Templating ist jetzt auf Augenhöhe mit Vue oder React

Hey, ich bin Juro, ich bin einer der Betreuer von Django-Komponenten. In den Versionen v0.90–0.94 haben wir Funktionen hinzugefügt, die die Verwendung von Komponenten in Vorlagen viel flexibler machen, ähnlich wie bei JSX/Vue.

(Diese Informationen sind bereits etwas veraltet (veröffentlicht vor einem Monat; die neueste Version ist v0.101), da ich damit beschäftigt bin, Unterstützung für JS/CSS-Variablen, TypeScript & Sass und HTML-Fragmente hinzuzufügen. Spannendes Zeug! Aber ich Mir ist aufgefallen, dass ich dieses Update noch nicht geteilt habe!)

Wie auch immer, das Folgende ist eine Komponente blog_post, die einen Titel, eine ID und zusätzliche Kwargs akzeptiert, die von blog_post_props angewendet werden:

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

Das Obige ist eine Kombination mehrerer Funktionen:

1. Selbstschließende Tags:

Statt

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

Sie können jetzt einfach schreiben

    {% component "my_component" / %}

2. Mehrzeilige Tags:

django_components konfiguriert Django jetzt automatisch so, dass mehrzeilige Tags zugelassen werden. Anstatt also alles in eine einzige Zeile zu packen:

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

Sie können es auf mehrere Zeilen verteilen:

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

3. Spread-Operator:

Ähnlich wie der ...props-Operator in JSX oder der v-bind in Vue werden hiermit props/kwargs an einer bestimmten Position eingefügt.

Also statt

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

Sie können die Kwargs in einem Wörterbuch haben und dann Folgendes anwenden:

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

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

4. Vorlagen-Tags innerhalb von Zeichenfolgenliteralen in Komponenteneingaben:

Sie können jetzt Vorlagen-Tags und Filter in Komponenteneingaben verwenden:

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

Auf diese Weise müssen Sie nicht jedes Mal zusätzliche Variablen definieren, wenn Sie einen Wert formatieren müssen.

Beachten Sie, dass das Ergebnis als Wert übergeben wird, wenn nur ein einzelnes Tag und kein zusätzlicher Text vorhanden ist. „{% random_int 10 20 %}“ übergibt also eine Zahl und „{{ editable|not }}“ übergibt einen booleschen Wert.

Sie können sogar noch einen Schritt weiter gehen und eine ähnliche Erfahrung wie Vue oder React machen, wo Sie beliebige Codeausdrücke auswerten können, also ähnlich wie hier:

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

Dies kann mit django-expr möglich sein, das ein expr-Tag und einen Filter hinzufügt, mit denen Sie Python-Ausdrücke innerhalb der Vorlage auswerten können:

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

5. Unterstützung für {% comp_name %} {% endcomp_name %} und TagFormatter

Standardmäßig werden die Komponenten mit dem Komponenten-Tag geschrieben, gefolgt vom Namen der Komponente:

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

Sie können dies jetzt ändern (und sogar Ihr eigenes erstellen!).

Wenn Sie beispielsweise COMPONENTS.tag_formatter auf „django_components.shorthand_component_formatter“ setzen, können Sie Komponenten wie folgt schreiben:

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

Es wird noch viel mehr kommen, also probieren Sie django-components unbedingt aus!

Das obige ist der detaillierte Inhalt vondjango-components v Templating ist jetzt auf Augenhöhe mit Vue oder React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!