Rumah pembangunan bahagian belakang Tutorial Python django-components v Templating kini setanding dengan Vue atau React

django-components v Templating kini setanding dengan Vue atau React

Sep 26, 2024 am 06:58 AM

django-components v Templating is now on par with Vue or 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
    / %}
Salin selepas log masuk

Di atas adalah gabungan pelbagai ciri:

1. Tag penutup sendiri:

Sebaliknya

    {% component "my_component" %}
    {% endcomponent %}
Salin selepas log masuk

Anda kini boleh menulis dengan mudah

    {% component "my_component" / %}
Salin selepas log masuk

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 %}
Salin selepas log masuk

Anda boleh menyebarkannya ke beberapa baris:

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

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"
    / %}
Salin selepas log masuk
Salin selepas log masuk

Anda boleh mempunyai kwarg dalam kamus, dan kemudian gunakannya:

    # Python
    props = {
        "title": "abcdef...",
        "author": "John Wick",
        "date_published": "2024-08-28"
    }
Salin selepas log masuk
    {# Django #}
    {% component "blog_post" ...props %}
Salin selepas log masuk

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 }}"
    / %}
Salin selepas log masuk

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 }
    />
Salin selepas log masuk

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' %}"
    / %}
Salin selepas log masuk

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 %}
Salin selepas log masuk

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 %}
Salin selepas log masuk

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!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

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

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk menyelesaikan masalah kebenaran yang dihadapi semasa melihat versi Python di Terminal Linux? Bagaimana untuk menyelesaikan masalah kebenaran yang dihadapi semasa melihat versi Python di Terminal Linux? Apr 01, 2025 pm 05:09 PM

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

Bagaimana untuk mengelakkan dikesan oleh penyemak imbas apabila menggunakan fiddler di mana-mana untuk membaca lelaki-dalam-tengah? Bagaimana untuk mengelakkan dikesan oleh penyemak imbas apabila menggunakan fiddler di mana-mana untuk membaca lelaki-dalam-tengah? Apr 02, 2025 am 07:15 AM

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

Bagaimana cara menyalin seluruh lajur satu data ke dalam data data lain dengan struktur yang berbeza di Python? Bagaimana cara menyalin seluruh lajur satu data ke dalam data data lain dengan struktur yang berbeza di Python? Apr 01, 2025 pm 11:15 PM

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 Kaedah Projek dan Masalah Dikemukakan Dalam masa 10 Jam? Bagaimana Mengajar Asas Pengaturcaraan Pemula Komputer Dalam Kaedah Projek dan Masalah Dikemukakan Dalam masa 10 Jam? Apr 02, 2025 am 07:18 AM

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 tanpa serving_forever ()? Bagaimanakah uvicorn terus mendengar permintaan http tanpa serving_forever ()? Apr 01, 2025 pm 10:51 PM

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

Bagaimana untuk mendapatkan data berita yang melangkaui mekanisme anti-crawler Investing.com? Bagaimana untuk mendapatkan data berita yang melangkaui mekanisme anti-crawler Investing.com? Apr 02, 2025 am 07:03 AM

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

See all articles