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


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="DirkDiggler" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  DirkDiggler
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I’ve found another work around just now using the <code>metadata</code> field of the <code>live</code> macro in the router.</p>
<blockquote>
<p><code>:metadata</code> - a map to optional feed metadata used on telemetry events and route info, for example: <code>%{route_name: :foo, access: :user}</code>. This data can be retrieved by calling <a href="https://hexdocs.pm/phoenix/1.6.15/Phoenix.Router.html#route_info/4" rel="noopener nofollow ugc"><code>Phoenix.Router.route_info/4</code></a> with the <code>uri</code> from the <code>handle_params</code> callback. <strong>This can be used to customize a LiveView which may be invoked from different routes.</strong></p>
</blockquote>
<p>With a route of:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">live "/tabs/a", TabsLive, :index, metadata: %{tab: :tab_a}
live "/tabs/a/:id/edit", TabsLive, :edit, metadata: %{tab: :tab_a}
live "/tabs/a/new", TabsLive, :new, metadata: %{tab: :tab_a}
live "/tabs/b", TabsLive, :index, metadata: %{tab: :tab_b}
live "/tabs/b/:id/edit", TabsLive, :edit, metadata: %{tab: :tab_b}
live "/tabs/b/new", TabsLive, :new, metadata: %{tab: :tab_b}
</code></pre>
<p>Then in <code>TabsLive</code> <code>handle_param</code> you can fetch the tab from the metadata specified above by doing:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir"># I don't think the host really matters here, but not 100% sure
%{:tab =&gt; tab} = Phoenix.Router.route_info(AppWeb.Router, "GET", URI.parse(uri).path, "127.0.0.1")
</code></pre>
<p>You can then plop the tab in the assign and use it to display/interact the tab component.</p>
<p>This makes it a little less cumbersome in the sense that you don’t need to parse anything specific out of the path by hand. Albeit, the computational work of parsing the URL is the same.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="308209" 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/responsibilites-of-components-in-a-phoenix-liveview/50980/12">Post #11</a>
	                </div>
	            </div>
              <div id="likers-container-308209" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="308209"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-last-post cat-last-post" title="Last post!"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <span class="all-loaded">— All posts loaded —</span>
</div></template></turbo-stream>