


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!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Penyelesaian kepada Isu Kebenaran Semasa Melihat Versi Python di Terminal Linux Apabila anda cuba melihat versi Python di Terminal Linux, masukkan Python ...

Cara mengelakkan dikesan semasa menggunakan fiddlerevery di mana untuk bacaan lelaki-dalam-pertengahan apabila anda menggunakan fiddlerevery di mana ...

Apabila menggunakan Perpustakaan Pandas Python, bagaimana untuk menyalin seluruh lajur antara dua data data dengan struktur yang berbeza adalah masalah biasa. Katakan kita mempunyai dua DAT ...

Bagaimana Mengajar Asas Pengaturcaraan Pemula Komputer Dalam masa 10 jam? Sekiranya anda hanya mempunyai 10 jam untuk mengajar pemula komputer beberapa pengetahuan pengaturcaraan, apa yang akan anda pilih untuk mengajar ...

Bagaimanakah Uvicorn terus mendengar permintaan HTTP? Uvicorn adalah pelayan web ringan berdasarkan ASGI. Salah satu fungsi terasnya ialah mendengar permintaan HTTP dan teruskan ...

Menggunakan Python di Terminal Linux ...

Fastapi ...

Memahami Strategi Anti-Crawling of Investing.com Ramai orang sering cuba merangkak data berita dari Investing.com (https://cn.investing.com/news/latest-news) ...
