مرحبًا، أنا جورو، أنا أحد المشرفين على مكونات جانغو. في الإصدارات v0.90-0.94 أضفنا ميزات تجعل استخدام المكونات في القوالب أكثر مرونة، على غرار JSX / Vue.

(هذه المعلومات قديمة بعض الشيء بالفعل (تم إصدارها منذ شهر، وآخر إصدار هو الإصدار 0.101)، حيث أنني مشغول بإضافة دعم لمتغيرات JS / CSS، وTypeScript & Sass، وجزء HTML. أشياء مثيرة! لكنني أدركت أنني لم أشارك هذا التحديث بعد!)

على أي حال، ما يلي هو مكون blog_post، الذي يقبل العنوان والمعرف وkwargs الإضافية المطبقة من blog_post_props:

    {% 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 أو v-bind في Vue، يؤدي هذا إلى إدراج الدعائم / kwargs في موضع معين.

لذلك بدلاً من

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

يمكنك الحصول على kwargs في القاموس، ثم تطبيق ذلك:

    # 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 }}"
    / %}

بهذه الطريقة لن تضطر إلى تحديد متغيرات إضافية في كل مرة تحتاج فيها إلى تنسيق قيمة.

لاحظ أنه عندما يكون هناك علامة واحدة فقط ولا يوجد نص إضافي حولها، فسيتم تمرير النتيجة كقيمة. لذا فإن "{% Random_int 10 20 %}" يمرر رقمًا، و"{{ قابل للتحرير|ليس }}" يمرر قيمة منطقية.

يمكنك أيضًا المضي قدمًا والحصول على تجربة مماثلة لـ Vue أو React، حيث يمكنك تقييم تعبيرات التعليمات البرمجية العشوائية، AKA مشابهة لما يلي:

يمكن أن يكون هذا ممكنًا باستخدام Django-expr، الذي يضيف علامة expr ومرشحًا يمكنك استخدامه لتقييم تعبيرات Python من داخل القالب:

    {% 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 %}

هناك المزيد في المستقبل، لذا تأكد من تجربة مكونات جانغو!