Best way to open a child view inside an #each loop

1

I’m looking for the “Ember” way to open up a child template inside of an #each loop I have a grid of thumbnails that when clicked on expands to show that item’s content. My current solution is simply a link-to for each object’s model, and then catching the route transition in the view and hiding or displaying content that already exists as part of the #each loop’s html.

{{#each tile in tiles}}
    <li class='tile-item'>
        {{#link-to 'category' tile}}
            <img {{bind-attr src=tile.thumb }}>
            <div class="expanded-content hidden">
                ... lots of stuff in here ...
            </div>
        {{/link-to}}
    </li>
{{/each}}

This works for my current needs, but I’m guessing there’s a more elegant solution, one that allows me to load that tile’s template only when it’s clicked on or the url changes to that tile’s url. Something like:

{{#each tile in tiles}}
    <li class='tile-item'>
        {{#link-to 'category' tile outlet='expandedContent'}}  // It would be nice to be able to set the outlet from my link-to, right?
            <img {{bind-attr src=tile.thumb }}>
            {{outlet 'expandedContent'}} //  I know that outlets inside of #each loops don't work (at least they weren't working for me)
        {{/link-to}}
    </li>
{{/each}}

Thanks everyone!

2

You could create a component to contain the tile-item and add a conditional in the template to show the expanded content when desired.