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,
<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"
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
Then, create some button to launch the Drab event in the commander:
<button drab-click="replace_list">Replace List</button>
Did you notice
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
defhandler replace_list(socket, _sender) do
Drab.Live.poke socket, users: ["Mścisław", "Bożydar", "Mściwój", "Bogumił", "Mirmił"]
What is going on here? We've just modified the assign
with the new value.
pushes the new value and re-evaluate the corresponding part of the template. Notice that you don't have to
all assigns, Drab
remembers what was there previously, and replaces only the assigns you've poked (in this case,
The second button runs
replace_title event handler, which changes the value of the
defhandler replace_title(socket, _sender) do
Drab.Live.poke socket, title: "New, better Title"
Of course you can change the values of many assigns in one
, 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
users = Drab.Live.peek(socket, :users)
Drab.Live.poke socket, users: users ++ ["Hegemon"]
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.