javascript - Aurelia 中的嵌套重复无法识别对象数组

Question

使用 Aurelia，我有以下模型:

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

和以下 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>

外层repeat.for似乎工作正常并且${service.name}替换为 .name来自模型的属性。然而，${instance.uri}不提供任何输出。如果我更换 ${instance.uri}与 ${service.instances[0].uri}我确实得到了预期的输出。

此外，我希望第二次重复 service of services在表体中生成两行，但它只生成一行。

我试过替换 <div repeat.for="instance of service.instances">与 <div repeat.for="instance of $parent.instances">同样令人不满意的结果。

我需要更改什么以确保内部重复正常工作？

Answer 1

浏览器不允许在表格中使用 div。

改变这个:

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

为此:

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