Question

在Phoenix实时视图文档中，我添加了一个实时页面，用于编写实时表单应用程序。有一个非常简单的演示：

<h2>Hello</h2>

Counter is222: <%= @counter %>
<hr>

<button phx-click="dec">-</button>
<button phx-click="inc">+</button>

<table border="1">
  <tr>
    <th contenteditable="true">Month</th>
    <th>S1</th>
    <th>S2</th>
  </tr>
  <tr>
    <td contenteditable="true">January</td>
    <td contenteditable="true">$100</td>
    <td contenteditable="true">$10220</td>
  </tr>
</table>

服务器端代码（就像文档一样）：

defmodule TicTacWeb.MemberSchedulerLive do
  use Phoenix.LiveView


  def render(assigns) do
    TicTacWeb.PageView.render("member_scheduler.html", assigns)
  end

  def mount(_, socket) do
    {:ok, assign(socket, %{counter: 100})}
  end

  def handle_event("inc", _, socket) do
    {:noreply, update(socket, :counter, fn(x) -> x + 1 end)}
  end

  def handle_event("dec", _, socket) do
    IO.puts("item")
    {:noreply, update(socket, :counter, fn(x) -> x - 1 end)}
  end

end

问题是<td contenteditable的值将在我单击-或+向服务器发送消息后恢复。

为什么-或+影响<td>的价值？是不是将修改后的dom数据最小化？
这种场景是否有最佳实践？

谢谢！

更新
将contenteditable添加为数据模型后，它仍然无法使用，例如：
1. html代码段

    ....
    <td contenteditable="true">$100</td>
    <td contenteditable="true" phx-blur="somedata"><%=@somedata%></td>
  </tr>
</table>

后端

  ...
  def mount(_, socket) do
    {:ok, assign(socket, %{counter: 100, somedata: "$001"})}
  end

如果单击@somedata或-，+也会还原为$ 001。

Answer 1

为什么-或+影响<td>的价值？

反之亦然。它们不会影响<td>的值，相反，它将在先前状态和更新状态之间发送 diff ，并且前端应用该 diff 。

LiveView对contenteditable="true"的本地更改一无所知，因此它将所有内容重置为原始状态，只有:counter被更新。要支持contenteditable="true"，您需要使这些<td>成为数据模型的一部分，以便LiveView知道其中的变化。

Answer 2

我最终通过两步解决了这个问题：

添加phx-update='ignore'，可编辑的内容将不会更新！
在这个阶段，它是<td contenteditable="true" phx-update='ignore'>$10220</td>
将phoenix_live_view更新为github: phoenixframework/phoenix_live_view（锁定提交为：73e9a695eff1d7d21e4cb34ea9894835b3a2fa32）的0.4.1，而旧版本似乎不支持phx-update

希望它也可以为您提供帮助。

感谢@Aleksei Matiushkin，我将深入研究liveview diff算法。

为什么phoenix liveview更新/分配消息使客户端contenteditable值恢复？

2 个答案: