Click to Edit

클릭하여 편집하는 패턴은 페이지 새로고침 없이 레코드의 일부 또는 전체를 인라인으로 편집할 수 있는 방법을 제공합니다.

• 이 패턴은 연락처의 세부 정보를 표시하는 UI로 시작합니다. 이 div에는 /contact/1/edit에서 연락처 편집 UI를 가져올 버튼이 있습니다.

<div hx-target="this" hx-swap="outerHTML">
    <div><label>First Name</label>: Joe</div>
    <div><label>Last Name</label>: Blow</div>
    <div><label>Email</label>: [email protected]</div>
    <button hx-get="/contact/1/edit" class="btn primary">
    Click To Edit
    </button>
</div>

• 이것은 연락처를 편집할 수 있는 form을 반환합니다.

<form hx-put="/contact/1" hx-target="this" hx-swap="outerHTML">
  <div>
    <label>First Name</label>
    <input type="text" name="firstName" value="Joe">
  </div>
  <div class="form-group">
    <label>Last Name</label>
    <input type="text" name="lastName" value="Blow">
  </div>
  <div class="form-group">
    <label>Email Address</label>
    <input type="email" name="email" value="[email protected]">
  </div>
  <button class="btn">Submit</button>
  <button class="btn" hx-get="/contact/1">Cancel</button>
</form>

• 이 form은 일반적인 REST-ful 패턴에 따라 /contact/1로 PUT 요청을 보냅니다.

🔗Demo