<turbo-stream action="append" target="posts_list"><template>    <div class="postbit" id="38990" data-post-id="38990">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="jschoch" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/jschoch/120/16709_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  jschoch
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Thanks, I suppose I’m a bit confused as to how to deal with state now that there are 3 things all trying to work together (unpoly view state, phoenix controllers, phoenix sockets).  In the above example I am starting with the controller’s assign state and then updating the assign “live” via the socket, however the controller doesn’t know anything about that and if unpoly asks the controller for something else it doesn’t have the updated state.  Maybe authentication is a bad first use case to learn about unpoly + drab… leaves me wanting some examples to see what patterns work and how you are thinking about state with these tools?</p>
<p>Maybe this should be forked into a new topic?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="38990" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/drab-remote-controlled-frontend-framework-for-phoenix/3277/122">Post #121</a>
	                </div>
	            </div>
              <div id="likers-container-38990" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="38990"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #121"></div>
  </section>
</div>
    <div class="postbit" id="41381" data-post-id="41381">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="grych" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/grych/120/5610_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  grych
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
			          <div class="user-title">
									<span>Creator of Drab</span>
			          </div>
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Hi all,<br>
news from the Drab world: 0.5.0 is coming to town soon!</p>
<p>This will be a major update. <code>Drab.Query</code> (jQuery-based module) will not be a default one anymore, so by default Drab will not need jQuery to operate.</p>
<p>Two new modules are coming:</p>
<ul>
<li>
<p><code>Drab.Live</code>, introducing living expressions. Yes, you may update your Phoenix template:</p>
<pre><code> &lt;a href="https://&lt;%= @url%&gt;" @style.backgroundColor=&lt;%= @color%&gt;&gt;&lt;%= @url %&gt;&lt;/a&gt;
</code></pre>
<p>by setting up new assigns values</p>
<pre><code> poke socket, url: "tg.pl/drab", color: "red"
</code></pre>
<p>live, without re-rendering and reloading the page.</p>
</li>
<li>
<p><code>Drab.Element</code>, with easy-to use query and update functions on html elements:</p>
<pre><code>  set_prop socket, "p", style: %{"backgroundColor" =&gt; "red"} # awesome effect
</code></pre>
</li>
</ul>
<p>The new demo page will has been rewritten to use new modules only. You may check it out now, before it went live: <a href="https://tg.pl/drab/live" rel="noopener nofollow ugc">https://tg.pl/drab/live</a></p>
<p>I will try to release it this weekend.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="41381" data-batch-url="/posts/batch_likers">
                        2
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/drab-remote-controlled-frontend-framework-for-phoenix/3277/123">Post #122</a>
	                </div>
	            </div>
              <div id="likers-container-41381" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="41381"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #122"></div>
  </section>
</div>
    <div class="postbit" id="41387" data-post-id="41387">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="OvermindDL1" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/OvermindDL1/120/2677_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  OvermindDL1
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="grych" data-post="123" data-topic="3277">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/grych/48/5610_2.png" class="avatar"> grych:</div>
<blockquote>
<p>news from the Drab world: 0.5.0 is coming to town soon!</p>
</blockquote>
</aside>
<p>Whooooo!</p>
<aside class="quote no-group" data-username="grych" data-post="123" data-topic="3277">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/grych/48/5610_2.png" class="avatar"> grych:</div>
<blockquote>
<p>Drab.Live, introducing living expressions. Yes, you may update your Phoenix template:</p>
</blockquote>
</aside>
<p>Cannot wait to try this out fully.  <img src="https://forum.elixirforum.com/images/emoji/apple/slight_smile.png?v=15" title=":slight_smile:" class="emoji" alt=":slight_smile:" loading="lazy" width="20" height="20"></p>
<aside class="quote no-group" data-username="grych" data-post="123" data-topic="3277">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/grych/48/5610_2.png" class="avatar"> grych:</div>
<blockquote>
<p>Drab.Element, with easy-to use query and update functions on html elements:</p>
</blockquote>
</aside>
<p>Fascinating, useful.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="41387" data-batch-url="/posts/batch_likers">
                        2
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/drab-remote-controlled-frontend-framework-for-phoenix/3277/124">Post #123</a>
	                </div>
	            </div>
              <div id="likers-container-41387" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="41387"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #123"></div>
  </section>
</div>
    <div class="postbit" id="41807" data-post-id="41807">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="grych" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/grych/120/5610_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  grych
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
			          <div class="user-title">
									<span>Creator of Drab</span>
			          </div>
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<h1><a name="p-41807-drab-050-released-2017-07-17-1" class="anchor" href="#p-41807-drab-050-released-2017-07-17-1" aria-label="Heading link" rel="nofollow"></a>Drab 0.5.0 released (2017-07-17)</h1>
<p><em><strong>This version is a major update</strong></em>. The default module, <code>Drab.Query</code> has been replaced with <code>Drab.Live</code> and <code>Drab.Element</code>. Drab is not jQuery dependent by default anymore.</p>
<h2><a name="p-41807-new-modules-2" class="anchor" href="#p-41807-new-modules-2" aria-label="Heading link" rel="nofollow"></a>New modules</h2>
<h3><a name="p-41807-drablive-3" class="anchor" href="#p-41807-drablive-3" aria-label="Heading link" rel="nofollow"></a><code>Drab.Live</code></h3>
<p>Allows to remotely (from the server side) replace the value of the assign in the displayed paged, without re-rendering and reloading the page.</p>
<p>Such template:</p>
<pre data-code-wrap="html"><code class="lang-html">&lt;a href="https://&lt;%= @url%&gt;" @style.backgroundColor=&lt;%= @color%&gt;&gt;
  &lt;%= @url %&gt;
&lt;/a&gt;
</code></pre>
<p>can be updates live with <code>poke/2</code>:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">poke socket, url: "tg.pl/drab", color: "red"
</code></pre>
<h3><a name="p-41807-drabelement-4" class="anchor" href="#p-41807-drabelement-4" aria-label="Heading link" rel="nofollow"></a><code>Drab.Element</code></h3>
<p>Query and update displayed page from the server side.</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">set_prop socket, "p", style: %{"backgroundColor" =&gt; "red"} # awesome effect
</code></pre>
<h2><a name="p-41807-broadcasting-5" class="anchor" href="#p-41807-broadcasting-5" aria-label="Heading link" rel="nofollow"></a>Broadcasting</h2>
<p>Broadcasting functions now get <code>subject</code> instead of <code>socket</code>. There is no need to have an active socket to broadcast anymore. Useful when broadcasting from background servers or <code>ondisconnect</code> callback.</p>
<h2><a name="p-41807-form-parameters-in-sender-6" class="anchor" href="#p-41807-form-parameters-in-sender-6" aria-label="Heading link" rel="nofollow"></a>Form parameters in sender</h2>
<p>If the event launching element is inside a <code>&lt;FORM&gt;</code>, it gets a values of all input elements within that form. This is a map, where keys are the element’s <code>name</code> or <code>id</code>.</p>
<h2><a name="p-41807-upgrading-from-04-7" class="anchor" href="#p-41807-upgrading-from-04-7" aria-label="Heading link" rel="nofollow"></a>Upgrading from 0.4</h2>
<p>Add <code>Drab.Query</code> and <code>Drab.Modal</code> to your commanders:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">use Drab.Commander, module: [Drab.Query, Drab.Modal]
</code></pre>
<h2><a name="p-41807-depreciations-8" class="anchor" href="#p-41807-depreciations-8" aria-label="Heading link" rel="nofollow"></a>Depreciations</h2>
<p>All soft depreciations up to 0.4.1 became hard.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="41807" data-batch-url="/posts/batch_likers">
                        5
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/drab-remote-controlled-frontend-framework-for-phoenix/3277/125">Post #124</a>
	                </div>
	            </div>
              <div id="likers-container-41807" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="41807"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #124"></div>
  </section>
</div>
    <div class="postbit" id="42176" data-post-id="42176">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="fusillicode" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/fusillicode/120/3499_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  fusillicode
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Hi, firs of all thank you for this wonderful library and for all your commitment! <img src="https://forum.elixirforum.com/images/emoji/apple/hugs.png?v=15" title=":hugs:" class="emoji" alt=":hugs:" loading="lazy" width="20" height="20"></p>
<p>I’m trying the latest version of Drab (i.e. 0.5) inside a Phoenix 1.3 project (here’s the <a href="https://github.com/fusillicode/metro" rel="noopener nofollow ugc">repo</a>) but I’m kind of stuck with the following error: </p><div class="lightbox-wrapper"><a class="lightbox" href="https://forum.elixirforum.com/uploads/default/original/2X/9/97234862aefae3c896a525e52a71a015702a5d36.png" data-download-href="https://forum.elixirforum.com/uploads/default/97234862aefae3c896a525e52a71a015702a5d36" title="Screen Shot 2017-07-20 at 08.58.02.png" rel="nofollow"><img src="https://forum.elixirforum.com/uploads/default/original/2X/9/97234862aefae3c896a525e52a71a015702a5d36.png" width="484" height="162"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg><span class="filename">Screen Shot 2017-07-20 at 08.58.02.png</span><span class="informations">484×162 12.8 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg></div></a></div><br>
I know that Drab isn’t quite ready for Phoenix 1.3 but as stated <a href="https://github.com/grych/drab/issues/19" rel="noopener nofollow ugc">here</a> it seems that it can work in someway.<p></p>
<p>Anyway, I tried “to follow the white rabbit” and as far as I understand the problem may reside in the wrong population of the cache. The paths of the drab template seem to be correct.<br>
Btw I tried to clean the cache but nothing changed.</p>
<p>Is there something that I’m missing? <img src="https://forum.elixirforum.com/images/emoji/apple/thinking.png?v=15" title=":thinking:" class="emoji" alt=":thinking:" loading="lazy" width="20" height="20"></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="42176" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/drab-remote-controlled-frontend-framework-for-phoenix/3277/126">Post #125</a>
	                </div>
	            </div>
              <div id="likers-container-42176" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="42176"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #125"></div>
  </section>
</div>
    <div class="postbit" id="42198" data-post-id="42198">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="grych" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/grych/120/5610_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  grych
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
			          <div class="user-title">
									<span>Creator of Drab</span>
			          </div>
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p><a class="mention" href="/u/fusillicode" rel="nofollow">@fusillicode</a>,<br>
The issue is in your <code>app.html.eex</code>. You should call <code>Drab.Client</code> after rendering your templates. Now, you are doing it before:</p>
<pre><code>&lt;head&gt;
...
&lt;script src="&lt;%= static_path(@conn, "/js/app.js") %&gt;"&gt;&lt;/script&gt;
&lt;%= Drab.Client.js(@conn) %&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;main role="main"&gt;
    &lt;%= render @view_module, @view_template, assigns %&gt;
  &lt;/main&gt;
&lt;script src="&lt;%= static_path(@conn, "/js/app.js") %&gt;"&gt;&lt;/script&gt;
&lt;/body&gt;
</code></pre>
<p>Just move <code>Drab.Client.js/1</code> call at the bottom, after second <code>&lt;script src="/js/app.js"&gt;</code>. BTW why to render the javascripts twice?</p>
<p>Second thing:  you are trying to <code>poke</code> some assign to the template like this:</p>
<pre><code>poke socket, nil, "index.html", text: String.upcase(text)
</code></pre>
<aside class="onebox allowlistedgeneric" data-onebox-src="https://drab.hexdocs.pm/Drab.Live.html">
  <header class="source">

      <a href="https://drab.hexdocs.pm/Drab.Live.html" target="_blank" rel="noopener nofollow ugc">drab.hexdocs.pm</a>
  </header>

  <article class="onebox-body">
    

<h3><a href="https://drab.hexdocs.pm/Drab.Live.html" target="_blank" rel="noopener nofollow ugc">Drab.Live – drab v0.10.5</a></h3>



  </article>

  <div class="onebox-metadata">
    
    
  </div>

  <div style="clear: both"></div>
</aside>

<p>It should work, but is not very elegant <img src="https://forum.elixirforum.com/images/emoji/apple/slight_smile.png?v=15" title=":slight_smile:" class="emoji" alt=":slight_smile:" loading="lazy" width="20" height="20"> <code>poke/3</code> and <code>poke/4</code> are functions working on partials (partial is a template you rendered inside other templates). As far as I see, you don’t have any partials rendered in the template, so you should use <code>poke/2</code> instead</p>
<pre><code>poke socket, text: String.upcase(text)
</code></pre> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="42198" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/drab-remote-controlled-frontend-framework-for-phoenix/3277/127">Post #126</a>
	                </div>
	            </div>
              <div id="likers-container-42198" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="42198"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #126"></div>
  </section>
</div>
    <div class="postbit" id="42260" data-post-id="42260">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="OvermindDL1" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/OvermindDL1/120/2677_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  OvermindDL1
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I really want a commander per template instead of a commander per controller, that way I could instance different templates on different pages or even multiple times in the same page and drab could control each of those.  ^.^</p>
<p><em>/me coughs</em></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="42260" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/drab-remote-controlled-frontend-framework-for-phoenix/3277/128">Post #127</a>
	                </div>
	            </div>
              <div id="likers-container-42260" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="42260"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #127"></div>
  </section>
</div>
    <div class="postbit" id="42322" data-post-id="42322">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="grych" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/grych/120/5610_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  grych
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
			          <div class="user-title">
									<span>Creator of Drab</span>
			          </div>
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>It can be done.</p>
<p>I can just simply add a possibility to choose the module where you run the exception handler:</p>
<pre><code>&lt;button drab-click="MyModule.clicked"&gt;
</code></pre>
<p>But in this case MyModule would not be a real commander - some handlers, like <code>onconnect</code> or <code>ondisconnect</code> can not be launched. So it could confuse users - some commanders launches callbacks, some not.</p>
<p>Or, we can ensure that all the commanders are declared in the controller:</p>
<pre><code>defmodule MyController
  use Drab.Controller, commander: [MyCommander, MyModule]
end
</code></pre>
<p>In this case we can launch all callbacks, in order of appearance.</p>
<p>Or, we can create a new type of commander, like <code>Drab.EventHandler</code> which will only contain handler functions with some callbacks (before execution, after execution, but not onload or ondisconnect).</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="42322" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/drab-remote-controlled-frontend-framework-for-phoenix/3277/129">Post #128</a>
	                </div>
	            </div>
              <div id="likers-container-42322" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="42322"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #128"></div>
  </section>
</div>
    <div class="postbit" id="42325" data-post-id="42325">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="hwinkel" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/hwinkel/120/5965_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  hwinkel
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>HI, just out of curiosity, in which extend is the drab approach different from nitrogen and n2o ?<br>
early days Erlang Web tools.</p>
<aside class="onebox allowlistedgeneric" data-onebox-src="https://nitrogenproject.com/">
  <header class="source">
      <img src="https://nitrogenproject.com/images/favicon.ico" class="site-icon" alt="" width="16" height="16">

      <a href="https://nitrogenproject.com/" target="_blank" rel="noopener nofollow ugc">nitrogenproject.com</a>
  </header>

  <article class="onebox-body">
    

<h3><a href="https://nitrogenproject.com/" target="_blank" rel="noopener nofollow ugc">Nitrogen - Nitrogen Web Framework for Erlang</a></h3>



  </article>

  <div class="onebox-metadata">
    
    
  </div>

  <div style="clear: both"></div>
</aside>
<p><a href="http://synrc.com/apps/n2o/" class="onebox" target="_blank" rel="noopener nofollow ugc">http://synrc.com/apps/n2o/</a></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="42325" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/drab-remote-controlled-frontend-framework-for-phoenix/3277/130">Post #129</a>
	                </div>
	            </div>
              <div id="likers-container-42325" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="42325"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #129"></div>
  </section>
</div>
    <div class="postbit" id="42332" data-post-id="42332">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="grych" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/grych/120/5610_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  grych
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
			          <div class="user-title">
									<span>Creator of Drab</span>
			          </div>
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Interesting, I never heart of nitrogen before. I will take a look, thanks!</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="42332" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/drab-remote-controlled-frontend-framework-for-phoenix/3277/131">Post #130</a>
	                </div>
	            </div>
              <div id="likers-container-42332" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="42332"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #130"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <a class="load-more-button" data-turbo-stream="true" href="/topics/3277/load_more?page=14">Load more posts (358 remaining)</a>
</div></template></turbo-stream>