अरे, मैं जूरो हूं, मैं डीजेंगो-घटकों के अनुरक्षकों में से एक हूं। रिलीज़ v0.90-0.94 में हमने ऐसी सुविधाएँ जोड़ी हैं जो JSX / Vue के समान टेम्प्लेट में घटकों के उपयोग को अधिक लचीला बनाती हैं।

(यह जानकारी पहले से ही थोड़ी पुरानी है (एक महीने पहले जारी की गई; नवीनतम v0.101 है), क्योंकि मैं जेएस/सीएसएस वेरिएबल्स, टाइपस्क्रिप्ट और सैस और HTML खंड के लिए समर्थन जोड़ने में व्यस्त हूं। रोमांचक सामान! लेकिन मैं एहसास हुआ कि अभी तक यह अपडेट साझा नहीं किया है!)

वैसे भी, निम्नलिखित एक घटक ब्लॉग_पोस्ट है, जो ब्लॉग_पोस्ट_प्रॉप्स से लागू शीर्षक, आईडी और अतिरिक्त क्वार्ग स्वीकार करता है:

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

उपरोक्त कई विशेषताओं का एक संयोजन है:

1. स्व-समापन टैग:

के बजाय

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

अब आप बस लिख सकते हैं

    {% component "my_component" / %}

2. मल्टी-लाइन टैग:

django_components अब मल्टी-लाइन टैग की अनुमति देने के लिए स्वचालित रूप से Django को कॉन्फ़िगर करता है। इसलिए सब कुछ एक पंक्ति में समेटने के बजाय:

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

आप इसे कई पंक्तियों में फैला सकते हैं:

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

3. स्प्रेड ऑपरेटर:

JSX में ...props ऑपरेटर या Vue में v-bind के समान, यह किसी दिए गए स्थान पर प्रॉप्स / kwargs सम्मिलित करता है।

इसलिए इसके बजाय

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

आप एक शब्दकोश में क्वार्ग्स रख सकते हैं, और फिर उसे लागू कर सकते हैं:

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

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

4. घटक इनपुट में स्ट्रिंग अक्षर के अंदर टेम्पलेट टैग:

अब आप घटक इनपुट के अंदर टेम्पलेट टैग और फ़्लटर का उपयोग कर सकते हैं:

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

इस तरह आपको हर बार किसी मान को प्रारूपित करने के लिए अतिरिक्त चर परिभाषित करने की आवश्यकता नहीं होती है।

ध्यान दें कि जब केवल एक टैग होता है और उसके आसपास कोई अतिरिक्त टेक्स्ट नहीं होता है, तो परिणाम एक मान के रूप में पारित किया जाता है। तो "{% रैंडम_इंट 10 20 %}" एक संख्या में पास होता है, और "{{ संपादन योग्य|नहीं }}" एक बूलियन में पास होता है।

आप एक कदम आगे भी जा सकते हैं और Vue या React के समान अनुभव प्राप्त कर सकते हैं, जहां आप मनमाने कोड अभिव्यक्तियों का मूल्यांकन कर सकते हैं, AKA इसके समान:

यह django-expr के साथ संभव हो सकता है, जो एक expr टैग और फ़िल्टर जोड़ता है जिसका उपयोग आप टेम्पलेट के भीतर से पायथन अभिव्यक्तियों का मूल्यांकन करने के लिए कर सकते हैं:

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

5. {% comp_name %} {% endcomp_name %} और TagFormatter

डिफ़ॉल्ट रूप से, घटकों को घटक टैग का उपयोग करके लिखा जाता है, उसके बाद घटक का नाम लिखा जाता है:

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

अब आप इसे बदल सकते हैं (और अपना खुद का भी बना सकते हैं!)।

उदाहरण के लिए, COMPONENTS.tag_formatter को "django_components.shorthand_component_formatter" पर सेट करने से आप इस तरह घटक लिख सकते हैं:

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

बहुत कुछ आना बाकी है, इसलिए django-घटकों को आज़माना सुनिश्चित करें!