django-components v Templating kini setanding dengan Vue atau React

Hei, saya Juro, saya salah seorang penyelenggara komponen-django. Dalam keluaran v0.90-0.94 kami telah menambahkan ciri yang menjadikan penggunaan komponen dalam templat jauh lebih fleksibel, serupa dengan JSX / Vue.

(Maklumat ini sudah agak ketinggalan zaman (dikeluarkan sebulan yang lalu; terkini ialah v0.101), kerana saya sedang sibuk menambah sokongan untuk pembolehubah JS / CSS, TypeScript & Sass dan serpihan HTML. Perkara yang menarik! Tetapi saya sedar belum berkongsi kemas kini ini!)

Apa pun, Berikut ialah blog_post komponen, yang menerima tajuk, id dan kwarg tambahan yang digunakan daripada blog_post_props:

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

Di atas adalah gabungan pelbagai ciri:

1. Tag penutup sendiri:

Sebaliknya

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

Anda kini boleh menulis dengan mudah

    {% component "my_component" / %}

2. Teg berbilang baris:

django_components kini secara automatik mengkonfigurasi Django untuk membenarkan teg berbilang baris. Jadi daripada menjejalkan semuanya pada satu baris:

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

Anda boleh menyebarkannya ke beberapa baris:

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

3. Pengendali penyebaran:

Begitu juga dengan ...operator props di JSX atau v-bind dalam Vue, ini memasukkan props / kwarg ke kedudukan tertentu.

Jadi bukannya

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

Anda boleh mempunyai kwarg dalam kamus, dan kemudian gunakannya:

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

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

4. Teg templat di dalam literal rentetan dalam input komponen:

Kini anda boleh menggunakan teg templat dan flters di dalam input komponen:

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

Dengan cara ini anda tidak perlu mentakrifkan pembolehubah tambahan setiap kali anda perlu memformatkan nilai.

Perhatikan bahawa apabila terdapat hanya satu teg dan tiada teks tambahan di sekelilingnya, maka hasilnya akan diluluskan sebagai nilai. Jadi "{% random_int 10 20 %}" lulus dalam nombor dan "{{ editable|not }}" melepasi boolean.

Anda juga boleh melangkah lebih jauh dan mengalami pengalaman serupa dengan Vue atau React, di mana anda boleh menilai ungkapan kod arbitrari, AKA serupa dengan ini:

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

Ini boleh dilakukan dengan django-expr, yang menambahkan teg expr dan penapis yang boleh anda gunakan untuk menilai ungkapan Python dari dalam templat:

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

5. Sokongan untuk {% comp_name %} {% endcomp_name %} dan TagFormatter

Secara lalai, komponen ditulis menggunakan tag komponen, diikuti dengan nama komponen:

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

Anda kini boleh menukar ini (malah membuat sendiri!).

Sebagai contoh, menetapkan COMPONENTS.tag_formatter kepada "django_components.shorthand_component_formatter" membolehkan anda menulis komponen seperti itu:

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

---

Banyak lagi akan datang, jadi pastikan anda mencuba komponen django!

Atas ialah kandungan terperinci django-components v Templating kini setanding dengan Vue atau React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!