htmx는 특정 요소에서 발생하는 특정 이벤트에 대한 응답으로 Ajax 요청을 시작합니다.
입력, Textarea 및 Select 요소의 경우 변경 사항입니다. -
양식 요소의 경우 제출 이벤트입니다.
다른 모든 요소의 경우 클릭 이벤트입니다. -
위의 농담 예를 확장하여이를 시연하여 사용자가 특정 단어가 포함 된 농담을 검색 할 수 있습니다.
-
검색을 트리거하려면 변경 이벤트를 트리거해야합니다.
요소의 경우 요소의 값이 변경되고 초점이 손실 될 때 발생합니다. 따라서 상자에 무언가를 입력하고 (예 : "bar") 페이지의 다른 곳을 클릭하면 농담이
요소에 나타납니다. 이것은 좋지만 일반적으로 사용자는 입력 할 때 검색 결과를 업데이트하려고합니다. 이렇게하려면 요소에 HTMX 트리거 속성을 추가 할 수 있습니다.
결과는 이제 즉시 업데이트됩니다. 이것은 좋지만 새로운 문제를 소개합니다. 이제 모든 키 프레스와 함께 API 통화를 사용하고 있습니다. 이를 피하기 위해 수정자를 사용하여 트리거의 동작을 변경할 수 있습니다. HTMX는 다음을 제공합니다
한 번 : 요청을 한 번만 수행하려면이 수정자를 사용하십시오. <code class="language-html"></code>
변경 :이 수정자는 요소의 값이 변경된 경우에만 요청이 이루어 지도록합니다.
지연 : :이 수정자는 요청을하기 전에 대기 시간 (예 : 1 초)을 설정합니다. 이 대기 기간 동안 이벤트가 다시 트리거되면 카운트 다운이 재설정됩니다. <input>
<: :> 스로틀 : :이 수정자를 사용하면 요청을하기 전에 대기 시간 (예 : 1 초)을 설정할 수도 있습니다. 그러나 지연과 달리 새 이벤트가 정해진 시간 내에 트리거되면 이벤트가 무시되어 정의 된 기간 후에 만 요청이 트리거되도록합니다.
<input>
from : :이 수정자를 사용하면 원래 요소가 아닌 다른 요소의 이벤트를들을 수 있습니다.
<code class="language-html"><button hx-get="https://v2.jokeapi.dev/joke/Any?format=txt&safe-mode&type=single" hx-target="#joke-container">
Make me laugh!
</button>
<p id="joke-container">Click the button to load a joke...</p></code>
이 경우 지연이 필요한 것 같습니다
이제 상자에 무언가를 입력 할 때 ( "개발자"와 같은 더 긴 단어를 사용하려고 시도), 유형을 일시 중지하거나 완료하는 경우에만 요청이 트리거됩니다.
보시다시피, 이것은 몇 줄의 클라이언트 코드만으로 활성 검색 상자 패턴을 구현할 수 있습니다. -
요청 표시기
웹 개발에서 사용자 피드백은 특히 완료하는 데 많은 시간이 걸릴 수있는 작업 (예 : 네트워크 요청 발행)에서 중요합니다. 이 피드백을 제공하는 일반적인 방법은 요청 표시기, 즉 조작이 진행 중임을 나타내는 시각적 프롬프트입니다. -
HTMX는 요청 표시기에 대한 지원을 통합하여 사용자 에게이 피드백을 제공 할 수 있습니다. HX-Indicator 클래스를 사용하여 요청 표시기로 사용 된 요소를 지정합니다. 이 클래스의 모든 요소의 불투명도는 기본값이 0으로 표시되어 보이지 않지만 DOM에는 존재합니다.
htmx가 ajax 요청을 할 때 HTMX-Request 클래스를 시작 요소에 적용합니다. HTMX-Request 클래스는 요소 (또는 HTMX-Indicator 클래스가있는 자식 요소)가 1의 불투명도로 전환하게됩니다. - 예를 들어 로드 스피너를 요청 표시기로 사용하는 요소를 고려하십시오.
hx-get 속성이있는 버튼이 클릭되고 요청이 시작되면 버튼은 HTMX-Request 클래스를 수신합니다. 이로 인해 요청이 완료되고 클래스가 삭제 될 때까지 이미지가 표시됩니다.
