Привет, я Джуро, я один из сопровождающих компонентов django. В выпусках 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_comComponents теперь автоматически настраивает 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. Оператор распространения:

Подобно оператору ...props в JSX или v-bind во Vue, он вставляет реквизиты/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 }}"
    / %}

Таким образом, вам не придется определять дополнительные переменные каждый раз, когда вам нужно отформатировать значение.

Обратите внимание: если имеется только один тег и вокруг него нет дополнительного текста, результат передается как значение. Таким образом, "{% rand_int 10 20 %}" передает число, а "{{ editable|not }}" передает логическое значение.

Вы даже можете пойти еще дальше и получить опыт, аналогичный Vue или React, где вы можете оценивать произвольные выражения кода, аналогичные этому:

Это возможно с помощью 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_comComponents.shorthand_comComponent_formatter» позволяет вам писать такие компоненты:

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

Впереди еще много чего, так что обязательно попробуйте django-компоненты!