django-comComponents v 템플릿은 이제 Vue 또는 React와 동일합니다.

안녕하세요, 저는 Juro입니다. 저는 Django-Components의 관리자 중 한 명입니다. v0.90-0.94 릴리스에서는 JSX/Vue와 유사하게 템플릿의 구성 요소를 훨씬 더 유연하게 사용할 수 있는 기능을 추가했습니다.

(이 정보는 이미 약간 오래된 정보입니다(한 달 전에 공개되었습니다. 최신 버전은 v0.101입니다). JS/CSS 변수, TypeScript 및 Sass, HTML 조각에 대한 지원을 추가하느라 바쁩니다. 흥미로운 내용입니다! 하지만 저는 아직 이 업데이트를 공유하지 않았다는 걸 깨달았습니다!)

어쨌든 다음은 blog_post_props에서 적용된 제목, ID 및 추가 kwargs를 허용하는 blog_post 구성 요소입니다.

    {% 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. 스프레드 연산자:

JSX의 ...props 연산자 또는 Vue의 v-bind와 유사하게 이는 props/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 %}"는 숫자를 전달하고 "{{ editable|not }}"은 부울을 전달합니다.

한 단계 더 나아가 Vue 또는 React와 유사한 경험을 할 수도 있습니다. 여기서는 다음과 유사한 임의의 코드 표현식을 평가할 수 있습니다.

    <MyForm
      value={ isEnabled ? inputValue : null }
    />

이는 템플릿 내에서 Python 표현식을 평가하는 데 사용할 수 있는 expr 태그와 필터를 추가하는 django-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_comComponents.shorthand_comComponent_formatter"로 설정하면 다음과 같은 구성 요소를 작성할 수 있습니다.

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

---

앞으로 더 많은 기능이 추가될 예정이므로 django-com넌트를 꼭 사용해 보세요!

위 내용은 django-comComponents v 템플릿은 이제 Vue 또는 React와 동일합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!