Stimulus 및 StimulusReflex에서 Rails UJS 확인 사용

환상적인 StimulusReflex 사용의 많은 이점 중 하나는 Rails UJS의 규칙을 다시 사용하는 것입니다. Simply appending a data attribute to an element to have it automatically disable itself during an interaction는 Rails를 처음 시작할 때를 떠올리게 하는 마법의 유형입니다.

상호 작용에 확인 단계를 추가해야 하는 경우(사용자가 개체를 파괴하려고 시도하는 경우 일반적인 패턴임)you can make use of the data-confirm attribute:

<button data-confirm="Are you sure you want to remove this context?">
  <%= render_svg 'icons/custom/remove' %>
</button>

Stimulus 또는 StimulusReflex와 함께 data-confirm를 사용하려고 하면 data-confirm is not supported out-of-the-box을 알 수 있습니다. data-action 또는 data-reflex 와 함께 사용하려면 사용자가 확인 모달을 수락할 때 confirm:complete 에 의해 트리거되는 click 대신 rails-ujs 이벤트를 수신하기만 하면 됩니다.

<button data-reflex-dataset="combined"
        data-confirm="Are you sure you want to remove this context?"
        data-reflex="confirm:complete->Context#remove_context">
  <%= render_svg 'icons/custom/remove' %>
</button>

이제 data-action 또는 data-reflex로 지정된 작업은 사용자가 확인 대화 상자를 수락하는 경우에만 트리거됩니다. 이를 통해 Stimulus 또는 StimulusReflex 상호 작용에 확인 단계를 쉽게 추가할 수 있습니다.


대화 디자인 플랫폼Voxable을 구축하는 동안 이 문제를 만났습니다. 챗봇이나 음성 응용 프로그램을 만들고 있다면 check it out !