1

我有一个搜索机场代码的 LiveView 应用程序。当用户输入ham时，它应该用 (String.upcase/1) 替换该表单字段的内容，HAM但事实并非如此。但根据我对我的代码的理解，它应该。我必须更改哪些内容才能将该字段中的所有输入替换为升级版本？

顺便说一句：如果我向它添加一个按钮并使用phx-submit而不是phx-change. 但我想让它为phx-change.

在此处输入图像描述

设置

$ mix phx.new travelagent --live --no-ecto
$ cd travelagent

lib/travelagent_web/router.ex

[...]
scope "/", TravelagentWeb do
  pipe_through :browser

  live "/", PageLive, :index
  live "/search", SearchLive
end
[...]

lib/travelagent/airports.ex

defmodule Travelagent.Airports do
  def search_by_code(""), do: []

  def search_by_code(code) do
    list_airports()
    |> Enum.filter(&String.starts_with?(&1.code, code))
  end

  def list_airports do
    [
      %{name: "Berlin Brandenburg", code: "BER"},
      %{name: "Berlin Schönefeld", code: "SXF"},
      %{name: "Berlin Tegel", code: "TXL"},
      %{name: "Bremen", code: "BRE"},
      %{name: "Köln/Bonn", code: "CGN"},
      %{name: "Dortmund", code: "DTM"},
      %{name: "Dresden", code: "DRS"},
      %{name: "Düsseldorf", code: "DUS"},
      %{name: "Frankfurt", code: "FRA"},
      %{name: "Frankfurt-Hahn", code: "HHN"},
      %{name: "Hamburg", code: "HAM"},
      %{name: "Hannover", code: "HAJ"},
      %{name: "Leipzig Halle", code: "LEJ"},
      %{name: "München", code: "MUC"},
      %{name: "Münster Osnabrück", code: "FMO"},
      %{name: "Nürnberg", code: "NUE"},
      %{name: "Paderborn Lippstadt", code: "PAD"},
      %{name: "Stuttgart", code: "STR"}
    ]
  end
end

lib/travelagent_web/live/search_live.ex

defmodule TravelagentWeb.SearchLive do
  use TravelagentWeb, :live_view
  alias Travelagent.Airports

  def mount(_params, _session, socket) do
    socket =
      socket
      |> assign(:airport_code, "")
      |> assign(:airports, [])

    {:ok, socket}
  end

  def handle_event(
        "airport_code_search",
        %{"airport_code" => airport_code},
        socket
      ) do
    airport_code = String.upcase(airport_code)

    socket =
      socket
      |> assign(:airport_code, airport_code)
      |> assign(:airports, Airports.search_by_code(airport_code))

    {:noreply, socket}
  end
end

lib/travelagent_web/live/search_live.html.leex

<form phx-change="airport_code_search">
  <fieldset>
    <label for="nameField">Airport Code</label>
    <input type="text" name="airport_code" value="<%= @airport_code %>"
    placeholder="e.g. FRA" 
    autofocus autocomplete="off" />
  </fieldset>
</form>

<%= unless @airports == [] do %>
  <h2>Search Results</h2>
  <table>
    <thead>
      <tr>
        <th>Airport Code</th>
        <th>Name</th>
      </tr>
    </thead>
    <tbody>
      <%= for airport <- @airports do %>
      <tr>
        <td><%= airport.code %></td>
        <td><%= airport.name %></td>
      </tr>
      <% end %>
    </tbody>
  </table>
<% end %>

JavaScript 控制台输出

JavaScript 控制台输出

phx-提交版本

如果我使用这种形式：

<form phx-submit="airport_code_search">
  <fieldset>
    <label for="nameField">Airport Code</label>
    <input type="text" name="airport_code" value="<%= @airport_code %>"
    placeholder="e.g. FRA" 
    autofocus autocomplete="off" />
    <input class="button-primary" type="submit" value="Search Airport">
  </fieldset>
</form>

我得到这个工作结果（输入fra并单击按钮后）：

在此处输入图像描述

PS：对于这个问题，JavaScript 或 CSS 有上百万种可能的解决方案。但我想知道如何使用 LiveView 正确解决这个问题。

4

1 回答 1

3

根据文件，

JavaScript 客户端始终是当前输入值的真实来源。对于任何具有焦点的给定输入，LiveView 永远不会覆盖输入的当前值，即使它偏离了服务器呈现的更新。

在这种情况下，一个解决方案是使用JS hooks。

于 2020-06-06T05:23:08.740 回答