In your controller:
def some_action(conn, params) do
...
render(conn, "page.html", i: 1)
end
the list comprehension just replicates the same href for each dropdown element
I’m not seeing that. If I do this:
lib/rumweb/controllers/page_controller.ex:
defmodule RumWeb.PageController do
use RumWeb, :controller
def index(conn, _params) do
stores = %{
CA: %{
la: [["name1", "name2", "name3"]],
sf: [["name4", "name5", "name6"]]
},
TX: %{
austin: [["name6", "name7", "name8"]]
}
}
render(conn, "index.html", stores: stores)
end
end
templates/page/index.html.eex:
<section class="phx-hero">
<h1><%= gettext "Welcome to %{name}!", name: "rum" %></h1>
<p>A really cool, real time service.</p>
</section>
<section class="phx-hero">
<%= for {state, cities} <- @stores do %>
<ul class="accordion">
<li>
<a class="toggle" href="javascript:void(0);"><%= state %></a>
<%= for {city, [names]} <- cities do %>
<ul class="inner">
<li>
<a href="#" class="toggle"><%= city %></a>
<div class="inner">
<%= for name <- names do %>
<p>
<%= link name, to: Routes.user_path(@conn, :show, name) %>
</p>
<% end %>
</div>
</li>
</ul>
<% end %>
</li>
</ul>
<% end %>
</section>
This is what I see in my browser:
And here is the html source:
<section class="phx-hero">
<ul class="accordion">
<li>
<a class="toggle" href="javascript:void(0);">CA</a>
<ul class="inner">
<li>
<a href="#" class="toggle">la</a>
<div class="inner">
<p>
<a href="/users/name1">name1</a> </p>
<p>
<a href="/users/name2">name2</a> </p>
<p>
<a href="/users/name3">name3</a> </p>
</div>
</li>
</ul>
<ul class="inner">
<li>
<a href="#" class="toggle">sf</a>
<div class="inner">
<p>
<a href="/users/name4">name4</a> </p>
<p>
<a href="/users/name5">name5</a> </p>
<p>
<a href="/users/name6">name6</a> </p>
</div>
</li>
</ul>
</li>
</ul>
<ul class="accordion">
<li>
<a class="toggle" href="javascript:void(0);">TX</a>
<ul class="inner">
<li>
<a href="#" class="toggle">austin</a>
<div class="inner">
<p>
<a href="/users/name6">name6</a> </p>
<p>
<a href="/users/name7">name7</a> </p>
<p>
<a href="/users/name8">name8</a> </p>
</div>
</li>
</ul>
</li>
</ul>
</section>
</div>
<script type="text/javascript" src="/js/app.js"></script>
<iframe src="/phoenix/live_reload/frame" style="display: none;"></iframe>
</body>
</html>
You can see that the link()
helper created href’s that are different for each name.