HTMX를 사용하는 레일의 지연 로드 양식 필드

11926 단어 railsjavascriptrubyhtmx
HTMX은 Javascript를 작성할 필요 없이 HTML 태그에 속성을 추가하기만 하면 HTTP AJAX 요청을 트리거할 수 있는 작고 강력한 라이브러리입니다.



이전 게시물에서 나는 방법을 썼습니다. 저는 Stimulus과 StimulusReflex을 많이 좋아합니다. 둘을 함께 사용하면 엄청나게 강력한 Rails용 라이브러리 세트가 됩니다.

그러나 최근에HTMX "Javascript를 사용하지 않고 HTML에서 직접 최신 브라우저 기능에 액세스할 수 있게 해주는 라이브러리"에 주목했습니다. 그래서 비교를 위해 HTMX를 사용하여 양식 필드의 동일한 지연 로딩을 구현하려고 생각했습니다.

/app/views/users/_form.html.erb는 이전과 동일하게 보입니다.

<%= form_with(model: user, url: [user], local: true) do |form| -%>
<div class="card">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">
      <%= form.text_field :name, label: "Name", placeholder: "Enter name", required: true %>
    </li>
    <li class="list-group-item">
      <%= form.email_field :email, label: "Email", placeholder: "Enter email", required: true %>
    </li>
  </ul>
  <div class="card-footer">
    <%= form.submit "Save", class: "btn btn-secondary float-right" %>
  </div>
</div>
<% end %>


이제 HTMX triggers 에 자리 표시자를 포함합니다.

<li class="list-group-item">
  <label class="required">Repositories</label>
  <div hx-get="/users/repositories" hx-trigger="load delay:1s" hx-swap="innerHTML" hx-headers='{"X-Requested-With": "XMLHttpRequest"}'>
    <i>Loading...</i>
  </div>
</li>


몇 가지 중요한 HTMX 속성은 다음과 같습니다.
  • hx-get이/users/repositories 끝점에 GET 요청을 생성함
  • 1초 지연으로 요소 로드 시 트리거되는 hx-트리거
  • hx-swap이 이 요소의 내부 html을 대체합니다
    • .
  • hx-headers는 Rails가 request.xhr을 알 수 있도록 일부 추가 헤더를 전달합니까? 참

    • route.rb에서 새 엔드포인트를 추가합니다.

    resources :users do
  collection do
    get "repositories", as: :repositories
  end
end


    그런 다음 저장소 작업을 UsersController에 추가합니다.

    def repositories
  user = User.new
  user.repositories.build
  @form = ActionView::Helpers::FormBuilder.new(:user, user, view_context, {})
  github = Octokit::Client.new(access_token: current_user.token)
  github.auto_paginate = true
  @repositories = github.repos({}, query: { type: "any", sort: "asc" })
  respond_to do |format|
    format.html { render layout: request.xhr? == false }
  end
end


    이제/app/views/users/repositories.html.erb를 추가합니다.

    <% @repositories.each do |repository| %>
  <%= @form.fields_for :repositories, repository do |ff| %>
    <div class="form-check form-check-inline">
      <%= ff.check_box :checked, class: "form-check-input" %>
      <%= ff.label :checked, repository.full_name.downcase, class: "form-check-label mr-2 mb-1" %>
    </div>
    <%= ff.hidden_field :uid, value: repository.id %>
    <%= ff.hidden_field :name, value: repository.name %>
    <%= ff.hidden_field :path, value: repository.full_name %>
    <%= ff.hidden_field :url, value: repository.html_url %>
  <% end %>
<% end %>


    그게 다야! StimulusReflex 버전과 유사하게 리포지토리를 비동기적으로 로드합니다.

    두 가지 중요한 참고 사항.

  • HTMX은 기본적으로 X-Requested-With 헤더를 설정하지 않으므로 Rails는 그것이 xhr 요청인지 알지 못합니다. 이 헤더를 설정하면 request.xhr을 사용할 수 있습니까? 컨트롤러에서 레이아웃을 렌더링할 시기를 아는 데 도움이 됩니다.
  • 모든 요청에 ​​hx-headers를 포함하지 않으려면 대신 상위 요소(body 태그 포함)에 설정하면 헤더가 상속됩니다.

    • <body hx-headers='{"X-Requested-With": "XMLHttpRequest"}'>


    HTMX은 very small이지만 놀랍게도 powerful library입니다! 백엔드에서 기존 Rails 부분을 계속 활용하면서 Javascript를 작성하지 않고도 반응형 애플리케이션을 생성할 수 있는 많은 잠재력이 있습니다. 🚀
    GraphQL을 통한 서비스 없음
    LeetCode 문제 풀이 - Different Ways to Add Parentheses

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage