17 Liveview 练习

试试看 Liveview

我们做一个被做烂的计数器吧呵呵
我们继续在~H""" """ 里面加上该呈现的 html，
这个计数器应该是有够小，我们就写在这边就好

  def render(assigns) do
    ~H"""
    我的第n个计数器
    <div>
      <h1>0</h1>
      <button>加一</button>
      <button>减一</button>
      <button>归零</button>
    </div>
    """
  end

长这样

liveview 这边跟 GenServer 用法有一点像，我们的状态是统一的
首先我们会需要做 mount 方法

  def mount(_params, _session, socket) do
    {:ok, assign(socket, :number, 0)}
  end

params 跟 session 我们这边暂时不会用到，没有用到的变数，可以在前面加底线代表忽略他
我们在用 assign 把 number 与他的初始值放进 socket 里面
放完之後我们就可以把 number 绑在我们的页面上

  def render(assigns) do
    ~H"""
    我的第n个计数器
    <div>
      <h1><%= @number %></h1>
      <button>加一</button>
      <button>减一</button>
      <button>归零</button>
    </div>
    """
  end

这个时候如果我直接调整 number 的值，并存档，他也会马上反映在网页上
不过我们想要的是按按钮改变，

  def render(assigns) do
    ~H"""
    我的第n个计数器
    <div>
      <h1><%= @number %></h1>
      <button phx-click="加ㄧ">加一</button>
      <button>减一</button>
      <button>归零</button>
    </div>
    """
  end

我们马上来帮加一按钮绑上动作，我们用 phx-click 在这个按钮上增加一个方法来接他

  def handle_event("加一", _value, socket) do
    {:noreply, assign(socket, :number, socket.assigns.number + 1)}
  end

就这样计数器的数字就会增加了
我们来看看纪录状态的 socket 长怎样

在加一这边把它印出来好了

  def handle_event("加一", _value, socket) do
    IO.inspect(type(socket))
    {:noreply, assign(socket, :number, socket.assigns.number + 1)}
  end

#Phoenix.LiveView.Socket<
  assigns: %{__changed__: %{}, flash: %{}, live_action: :index, number: 1},
  endpoint: CardWeb.Endpoint,
  id: "phx-FqmhzEUZvexvGAOH",
  parent_pid: nil,
  root_pid: #PID<0.1447.0>,
  router: CardWeb.Router,
  transport_pid: #PID<0.1441.0>,
  view: CardWeb.PageLive.Index,
  ...

可以看到这个跟我们之前一直在操作的 Game 有点像，
只是我们会动到的东西大部分都在 assigns 里面，
他也提供我们 assign 方法可以直接放东西进去。

来做好其他按钮吧!

  def render(assigns) do
    ~H"""
    我的第n个计数器
    <div>
      <h1><%= @number %></h1>
      <button phx-click="加一">加一</button>
      <button phx-click="减一">减一</button>
      <button phx-click="归零">归零</button>
    </div>
    """
  end

  def handle_event("减一", _value, socket) do
    {:noreply, assign(socket, :number, socket.assigns.number - 1)}
  end

  def handle_event("归零", _value, socket) do
    {:noreply, assign(socket, :number, 0)}
  end

成果 gif