HTMx를 사용한 HTML 입력 요소의 자유

보다 "전통적인"Django 개발 세계에서 온 저는 HTML 양식을 사용하여 백엔드와 통신하는 데 익숙했습니다.

GET 또는 POST 요청에 무언가를 포함해야 할 때마다 텍스트 상자에 입력된 데이터이거나 값을 포함하는 숨겨진 입력이건 관계없이 <form> 요소로 래핑했습니다. 그리고 대부분의 경우 이 기술은 효과가 있습니다.

그러나 이것이 문제가 되거나 적어도 성가신 경우가 있습니다. 문제는 HTML 구조가 <input> 요소를 <form> 요소로 래핑하도록 강제하여 일부 위치 지정 또는 스타일 지정 구성을 불가능하게 만드는 경우일 수 있습니다. 성가신 것은 HTML의 이러한 "제한"을 충족시키기 위해 계층 구조의 깊은 계층을 가져야 한다는 사실일 수 있습니다.

그러나 두려워하지 마십시오. 오늘을 저장하기 위해 여기에 있습니다. 이 JS 라이브러리를 사용하면 Django 프런트 엔드 작업을 크게 단순화할 수 있으며 이는 하나의 사용 사례에 불과합니다. 기본적으로 수행할 수 있는 작업은 DOM의 위치에 관계없이 GET 또는 POST 요청에 포함할 요소<input>를 지정하는 것입니다.

이렇게 하면 페이지를 구조화하고 해당 요소<input>를 모형 또는 디자인을 기반으로 원하는 위치에 정확하게 배치할 수 있는 완전한 자유가 제공됩니다.

<div class="column">
    <input class="input" name="item_quantity" type="number" />
</div>

<div class="column">
    <a hx-boost="true"
       hx-include="[name='item_quantity']"
       href="{% url 'submit_view' %}">
    Submit
    </a>
</div>

이 간단한 스니펫은 이에 대한 예를 보여줍니다. <input> 요소는 <form> 로 래핑되지 않습니다. 그럼에도 불구하고 그 값은 백엔드에 대한 요청에 포함됩니다.

hx-boost : 이것은 이 링크를 HTMx 기반 요청으로 "변환"합니다. 전체 페이지를 다시 로드하지 않고 GET 요청의 결과가 웹 사이트 본문을 대체합니다.

hx-include : GET 요청에 <input> 요소를 포함하는 방법입니다. 백엔드에서 request.GET.get('item_quantity', 1)를 사용하여 해당 입력 값에 액세스할 수 있습니다.

HTML 양식을 사용하지 않고 HTMx 을 사용하여 Django 백엔드로 데이터를 전달하는 또 다른 방법을 배웠기를 바랍니다.

즐거운 코딩하세요!