poke/2 is one of the most imprortant 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"
Nothing special yet, except
use Drab.Controller, which tells the controller that is has a corresponding commander. But, 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 a shorthand for
combination. There is a number of such shorthands for most popular events, see documentation for more.
The event handler function simply replaces the users list with the new one:
defmodule DrabPoc.LiveCommander do
def 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
def 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 correspoding parts of the page.
Last, but not least, is a 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:
def 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.