Phoenix: render template that has assigns values inside a template

Question

I'm trying to make my app DRY and modular. But when I tryed to put a component (small template) that receives dynamic values passed when calling/"instanciating" it inside another template (larger module) I got this error:

assign @conn not available in eex template. Available assigns: []

My component (small template) that I inserted inside my module (larger template) is this:

<div class="menuButton main <%= @class %>" id="<%= @id %>">
    <div class="menuButton firstChild linesItem"></div>
    <div class="menuButton firstChild textItem">MENU</div>
</div>

I inserted it in my module using:

<%= render myapp.ComponentView, "menuButton.html", class: nil, id: "menuButtonMenu" %>

and I inserted my module in my page using:

<%= render myapp.ModuleView, "header.html" %>

WHat's the best way of making this work while still keeping this logic of small components/larger modules clean and DRY?

Answer 1

As AbM said, you need to explicitly pass the assigns that you care about, for example:

<%= render myapp.ModuleView, "header.html", conn: @conn %>

If you want to support assigns conditionally, you can reference them off the assigns like this:

<%= link "a link", to: "/", class: assigns[:class] || "default" %>