Request for Comment
Ladies and Gentlemen,
this post is to discuss the new idea of treating the living pages in Drab, completely apart of jQuery or other JS libraries. The new approach should be more phoenix- and elixir-like!
TL;DR: demo page
Drab.Live
The goal is to re-use the Phoenix Templates with the living pages. When you render a template, you give some assigns to the template code. Drab.Live introduces the way to update the assigns on the fly!
Imagine you have got your template, rendered somewhere in the Controller:
<%= for user <- @users do %>
Username: <%= user %> <br>
<% end %>
And now imagine you can change the value of the assign on the fly. When you do
Drab.Live.poke socket, users: ["some", "other", "list"]
it immediately changes the corresponding part of the page in the browser.
There is also a function Drab.Live.peek/2 to read an existing value the assign.
How Does it Work
Having the own EEx Engine, it surrounds the code with <span>, having it easy to find & replace the value from the JavaScript. Warning: it does not work inside the tag yet:
- works:
<a href="a"><%= @link_name %></a> - does not work:
<a href="<%= @href %>">Click Me</a>
I am planning to sort it out next.
Demo
Please check the demo page for live examples.
TODO
There is a huge list of TODO, before it became usable:
- allow to live update inside a tag, eg
<div class="<%=@class%>"> - internal changes, like storing code partials inside a View instead of storing them on the page
- crypt everything which is stored on the client-side
- work on partials, propagate
pokechanges only into selected partials - have a values of the
<input>fields directly in the Commander Event Handler Function
