Question

我想我有：

<template>
  <!-- some code here -->
  <div>
    <div repeat.for="item of arr">
      <label for.bind="item.id">${item.name}</label>
    </div>
    <div repeat.for="item of arr">
      <input type="text" id.bind="item.id" value.bind="item.value" />
    </div>
  </div>
  <!-- more code here -->
</template>

让我们假设我的ViewModel的arr属性是：

arr = [
  { id: 'txtID', name: 'ID', value: '' },
  { id: 'txtFirstName', name: 'First Name', value: '' },
  { id: 'txtLastName', name: 'Last Name', value: '' }
];

Aurelia会像这样呈现：

<!-- some code here -->
<div>
  <div>
    <label for='txtID'>ID</label>
  </div>
  <div>
    <label for='txtFirstName'>First Name</label>
  </div>
  <div>
    <label for='txtLastName'>Last Name</label>
  </div>
  <div>
    <input type="text" id="txtID" value="" />
  </div>
  <div>
    <input type="text" id="txtFirstName" value="" />
  </div>
  <div>
    <input type="text" id="txtLastName" value="" />
  </div>
</div>
<!-- more code here -->

但我需要它像这样呈现：

<!-- some code here -->
<div>
  <div>
    <label for='txtID'>ID</label>
  </div>
  <div>
    <input type="text" id="txtID" value="" />
  </div>
  <div>
    <label for='txtFirstName'>First Name</label>
  </div>
  <div>
    <input type="text" id="txtFirstName" value="" />
  </div>
  <div>
    <label for='txtLastName'>Last Name</label>
  </div>
  <div>
    <input type="text" id="txtLastName" value="" />
  </div>
</div>
<!-- more code here -->

有两个条件：

我不能将它们放入容器中
我无法创建自定义元素

而且，请伙计们，我恳请您理解我的问题是：

如何在不创建容器的情况下使用repeat.for重复多个项目？

不建议更改我的HTML或类似的东西，因为我创建它只是作为我总是需要的东西的一个例子，并且总是通过创建容器（或者无容器的自定义元素，当我可以'时）结束有一个容器），但我想知道是否有任何方法可以顺利地做到这一点。

例如，在KO中，只要我们将foreach命令放在父级中，我就可以这样做：

<!-- some code here -->
<div data-bind="foreach: arr">
  <div>
    <label data-bind="for: id">{{name}}</label>
  </div>
  <div>
    <input type="text" data-bind="id: id, value: value" />
  </div>
</div>
<!-- more code here -->

Answer 1

只需使用像这样的模板标签

<template>
  <!-- some code here -->
  <div>
    <template repeat.for="item of arr">
      <div>
        <label for.bind="item.id">${item.name}</label>
      </div>
      <div>
        <input type="text" id.bind="item.id" value.bind="item.value" />
      </div>
    </template>
  </div>
  <!-- more code here -->
</template>

template标签是执行此操作的传统方式，因此Aurelia将简单地渲染其中的所有内容。

重复多个标签而不在Aurelia中创建容器

1 个答案: