Function poke/2 is one of the most important in Drab, so we should go a little bit deeper. Let's assume you have your index.html.eex already prepared, displaying a list of some users. There are two assigns there, @title and @users:
<strong><%= @title %>:</strong><br>
<%= for user <- @users do %>
Username: <%= user %><br>
<% end %>
The code is rendered as usual, in the simple Controller:
defmodule DrabPoc.LiveController do
use DrabPoc.Web, :controller
def index(conn, _params) do
render conn, "index.html", users: ["Dżesika", "Brajanek", "Zdzichu"], title: "Users List"
end
end
The goal of Drab is to update assigns live, without re-rendering the page. For this, Drab introduces its own EEx Engine. By default, it uses .drab extension, so you need to rename index.html.eex to index.html.drab.
Then, create some button to launch the Drab event in the commander:
<button drab-click="replace_list">Replace List</button>
Did you notice
drab-click attribute? This is an alternative method for defining handler for an event. There is a number of such shorthands for most popular events, see documentation for more.
The event handler function should be placed inside the commander module. By default, Drab searches for the corresponding names, so pages generated with DrabPoc.LiveController are handled by DrabPoc.LiveCommander. Handler below simply replaces the users list with the new one:
defmodule DrabPoc.LiveCommander do
use Drab.Commander
defhandler replace_list(socket, _sender) do
Drab.Live.poke socket, users: ["Mścisław", "Bożydar", "Mściwój", "Bogumił", "Mirmił"]
end
end
What is going on here? We've just modified the assign
@users with the new value.
Drab.Live.poke pushes the new value and re-evaluate the corresponding part of the template. Notice that you don't have to
poke all assigns,
Drab remembers what was there previously, and replaces only the assigns you've poked (in this case,
@users).
The second button runs replace_title event handler, which changes the value of the @title assign:
defhandler replace_title(socket, _sender) do
Drab.Live.poke socket, title: "New, better Title"
end
Of course you can change the values of many assigns in one
poke, Drab will find and update the corresponding parts of the page.
Last, but not least, is the possibility to get the current value of assigns. For this, we have a function called peek/2. In the example, the third button adds something to the existing list of users:
defhandler add_to_list(socket, _sender) do
{:ok, users} = Drab.Live.peek(socket, :users)
Drab.Live.poke socket, users: users ++ ["Hegemon"]
end
Notice that assign is updated only on the server side, with poke/2. This is why we didn't use peek/2 in the first example - having <input value="<%= @assign %>" does not update @assign when user changes the input.