CODEWITHSUNDEEP
javascriptaurelia
Larry Lustig
Larry Lustig

Reputation: 50970

Nested repeat in Aurelia does not recognize object array

Using Aurelia, I have the following model:

export class Services {
    heading = 'Services';
    services = [
        { 'name': 'Test Service', 'instances': [{'uri': 'test_uri'}]},
        { 'name': 'Another Service', 'instances': [{'uri': 'other_uri'}, {uri: 'backup_uri'}]}
    ];
}

and the following view:

<template>

    <require from="bootstrap/css/bootstrap.css"></require>

    <div class="container">
    <div class="row">
        <div class="col-md-12">
        <h2>${heading}</h2>
        </div>
    </div>

    <div class="row" repeat.for="service of services">
        <div class="panel panel-default">
            <div class="panel-heading">${service.name}</div>
            <table class="table">
                <thead>
                    <tr>
                        <th>URI</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    <div repeat.for="instance of service.instances">
                        <tr>
                            <td>${instance.uri}</td>
                            <td>Running</td>
                        </tr>
                    </div>
                </tbody>
            </table>
        </div>
    </div>
    </div>

</template>

The outer repeat.for seems to work correctly and ${service.name} is replaced with the .name property from the model. However, ${instance.uri} does not give any output. If I replace ${instance.uri} with ${service.instances[0].uri} I do get the output expected.

In addition, I expect the second repeat of service of services to generate two lines in the table body, but it generates only one.

I've tried replacing <div repeat.for="instance of service.instances"> with <div repeat.for="instance of $parent.instances"> with the same unsatisfactory result.

What do I need to change to ensure that the inner repeat works correctly?

Upvotes: 3

Views: 804

Answers (1)

Jeremy Danyow
Jeremy Danyow

Reputation: 26386

Browsers do not allow divs in tables.

change this:

<tbody>
  <div repeat.for="instance of service.instances">
    <tr>
      <td>${instance.uri}</td>
      <td>Running</td>
    </tr>
  </div>
</tbody>

to this:

<tbody>
  <tr repeat.for="instance of service.instances">
    <td>${instance.uri}</td>
    <td>Running</td>
  </tr>
</tbody>

Upvotes: 3

Related Questions