Is there an alternative to {{each}} for displaying iterative model data?

@sorvah wrote:

I’ve been using the {{#each}} component in my application to create tables from models that are loaded via ember-data like:

{{#each model as |model|}}
// table date using {{model.property}} in certain fields
{{/each}}

However I recently had an idea to replace these tables with ‘info cards’ to make them more user friendly. I realise though, that I have only ever used {{each}} for this task and if I want to display cards in something like a 5x5 grid, {{each}} won’t help me as it simply creates a list.

An example card in my current components template.hbs looks like:

<div class="card text-center">
    <div class="card-header">
        {{model.customer_id}} - {{model.first_name}} {{model.last_name}} - {{model.customer_age}} years old
    </div>
    <div class="card-block">
        <h4 class="card-title">Special title treatment</h4>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
    </div>
    <div class="card-footer text-muted">
        2 days ago
    </div>
</div>

Of course, I just use {{each}} for these cards I get a long list of vertical cards which isn’t what I’m going for.

How do I handle a case where I want to display markup per model return but I don’t want it in a big ol’ vertical list?

Posts: 3

Participants: 3

Read full topic