1

使用 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后，值将被恢复。-+

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

谢谢！

UPDATE
将 contenteditable 添加为数据模型后，它仍然不起作用，例如：
1. html 片段

    ....
    <td contenteditable="true">$100</td>
    <td contenteditable="true" phx-blur="somedata"><%=@somedata%></td>
  </tr>
</table>
  1. 后端
  ...
  def mount(_, socket) do
    {:ok, assign(socket, %{counter: 100, somedata: "$001"})}
  end

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

4

2 回答 2

1

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

反之亦然。它们不影响<td>' 值，相反，它发送前一个状态和更新状态之间的差异，前端应用这个差异。

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

于 2019-12-23T06:14:55.310 回答
0

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

  1. addphx-update='ignore'并且 contenteditable 将不会更新！
    在这个阶段，它<td contenteditable="true" phx-update='ignore'>$10220</td>

  2. 将 phoenix_live_view 更新为 0.4.1 github: phoenixframework/phoenix_live_view（锁定提交为：73e9a695eff1d7d21e4cb34ea9894835b3a2fa32），旧版本似乎不支持phx-update

希望它也能对你有所帮助。

感谢@Aleksei Matiushkin，我将深入研究实时查看差异算法。

于 2019-12-25T12:53:33.063 回答