그림 ぢ/후쿠오카. 그림 x/고쿠라. 그림 x의 piacere입니다
방문해 주셔서 감사합니다
지난번에 이어 Phoenix LiveView의 API없이 SPA를 만나갑니다.
이번에는, 전회 만든 「Qiita 검색(리얼타임 검색 첨부)」를, 업무계의 Web 어플리케이션에서는 자주 있는, 폼 submit 스타일로 환장해 보겠습니다
"Phoenix"은 Elixir 웹 프레임 워크입니다.
내용이 재미 있거나 도움이되면 "좋아요"잘 부탁드립니다

Advent Calendar,fukuoka.ex1위,Elixir2위 달성ヽ(=´▽`=)노

fukuoka.ex Advent Calendar, 웹 테크놀로지 카테고리에서 당당히 1위… 각 칼럼 꼭 읽어 주세요
htps : // 코 m / 아 d

그리고, 프로그래밍 언어 카테고리는, 1위가 Rust, 2위가 Elixir, 3위가 Go와 모던 언어 갖추는 밟은에서의 톱 3, 뜨거운 네
htps : // 코 m / 아 d

이 칼럼의 검증 환경

본 칼럼은, 이하 환경에서 검증하고 있습니다(Windows에서 검증하고 있습니다만 Linux나 mac에서도 동작한다고 가정합니다)

Windows 10

Elixir 1.13.0 on WSL2 Ubuntu※ 최신 버전의 설치 절차는 여기

Phoenix 1.6.6 　 　 　 ※ 최신 버전의 설치 절차는 여기

submit용 핸들러로 다시 쓰기

마지막 핸들러은 다음과 같이 "phx-change"를 사용하여 실시간 입력마다 Qiita API를 호출하는 핸들러였습니다.

lib/basic_web/live/qiita_search_realtime.ex

defmodule BasicWeb.QiitaSearchRealtime do
 use Phoenix.LiveView

 def render(assigns) do
 ~L"""
 …
 <form phx-change="change">
 <input type="text" name="query" value="<%= @query %>" placeholder="empty" />
…

이것을 제출 버튼 클릭시 Qiita API를 호출하는 핸들러로 변경합니다.
"phx-submit"을 사용하면 submit시에만 처리를 할 수 있으므로 submit 버튼을 추가해 보겠습니다.
그런 다음 Qiita API 검색 중에 양식 조작을 할 수 없기 때문에 'loading'이라는 UI 제어 플래그도 도입합니다.
덧붙여 「handle_event("change", ~"는, 이번의 환장으로, 이용되지 않게 됩니다

lib/basic_web/live/qiita_search_realtime.ex

defmodule BasicWeb.QiitaSearchRealtime do
	use Phoenix.LiveView

	def render(assigns) do
		~L"""
			<p>
			<%= if @message do %><%= @message %><% end %>
			</p>

			<!-- modify here---v -->
			<form phx-submit="submit">
			<input type="text" name="query" value="<%= @query %>" placeholder="empty" <%= if @loading, do: "readonly" %> />
			Query: <%= @query %><br>
			<input type="submit" value="search" onclick="blur()" <%= if @loading, do: "readonly" %> />
			</form>

			<table>
			<tr>
				<th>ID</th>
				<th>タイトル</th>
				<th>作成日</th>
			</tr>
			<%= for result <- @results do %>
			<tr>
				<td><%= result["id"] %></td>
				<td><%= result["title"] %></td>
				<td><%= result["created_at"] %></td>
			</tr>
			<% end %>
			</table>
		"""
	end

	def mount(_params, _session, socket) do
		{:ok, assign(socket, query: "", message: "[Init]", loading: false, results: [])}
	end

	def handle_event("change", %{"query" => query}, socket) do
		send(self(), {:submit, query})
		{:noreply, assign(socket, query: query, message: "")}
	end

	def handle_event("submit",  %{"query" => query}, socket) do
		send(self(), {:submit, query})
		{:noreply, assign(socket, query: query, message: "[Searching...]", loading: true)}
	end

	def handle_info({:submit, query}, socket) do
		results = Json.get("https://qiita.com", "/api/v2/items?query=#{query}")
		{:noreply, assign(socket, query: query, message: "[Complete!!]", loading: false, results: results)}
	end
end

브라우저에서 "http://localhost:4000/realtime"에 액세스하면 제출 버튼이있는 Qiita 검색 SPA 화면이 표시됩니다.

제출 버튼 클릭으로 Qiita 검색이 실행됩니다.

실시간 입력과 submit을 혼합

'phx-change'와 'phx-submit'을 혼합할 수도 있습니다.
텍스트 입력의 내용은, 「phx-change」로 화면상의 검색 캐릭터 라인을 실시간 갱신해, submit 버튼은 「phx-submit」로 submit 할 수 있도록 해 봅니다
구체적으로는 form에 "phx-change="change""를 추가하고 "handle_event("change", ~"에서 "send(self(), {:submit, query})"를 삭제(댓글 아웃) 합니다

lib/basic_web/live/qiita_search_realtime.ex

defmodule BasicWeb.QiitaSearchRealtime do
  use Phoenix.LiveView
	def render(assigns) do
		~L"""
		…
		<!-- modify here-----------v -->
        <form phx-submit="submit" phx-change="change">
        …
        """
    end
…
	def handle_event("change", %{"query" => query}, socket) do
		#send(self(), {:submit, query})  # <-- comment-out here
		{:noreply, assign(socket, query: query, message: "")}
	end
 …

이제 검색 문자열은 실시간으로 반영되지만 Qiita 검색은 제출 버튼을 클릭 할 때만 수행됩니다.

끝

이번에는 LiveView에서 양식 submit에 대해 설명했습니다.
업무계의 웹 앱에서는, submit 버튼에 의한 확정이나 갱신이 인기이므로, 이번의 쓰는 방법을 참고해 주세요
또, submit와 실시간 입력의 혼재에 대해서도 해설했습니다만, 이것들을 혼재시키는 모던 업무계 Web어플리에서는, 응용이 효과가 있는 테크닉이라고 생각합니다
다음 번에는 "LiveView 용 HTML을 템플릿 파일로 분리"

p.s.「좋아요」 잘 부탁드립니다

페이지 왼쪽 상단의 또는 을 클릭해 주셔서 감사합니다
여기의 숫자가 늘어나면, 작가로서는 「우케하고 있다」라는 감각을 얻을 수 있어 연재를 더욱 진화시켜 나가는 동기 부여가 되기 때문에, 보다 Elixir 재료를 보고 싶다고 하는 당신, 저희와 함께 북돋워 제발!