tag - Repite múltiples etiquetas sin crear un contenedor en Aurelia

qué se almacena en un contenedor de tag manager

Question

Supongamos que tengo:

<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>

Y supongamos que la propiedad arr de mi ViewModel es:

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

Aurelia lo hará así:

<!-- 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 -->

Pero lo necesito para hacer esto:

<!-- 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 -->

Hay dos condiciones:

1. No puedo ponerlos en un contenedor
2. No puedo crear un elemento personalizado

Y, chicos, por favor, les pido que comprendan que mi pregunta es:

¿Cómo puedo usar repetir para repetir varios elementos sin crear un contenedor ?

No sugiera cambiar mi HTML, ni nada por el estilo, porque lo he creado solo como un ejemplo de algo que siempre necesito y siempre termino creando un contenedor (o un elemento personalizado sin contenedor, cuando no puedo tener un contenedor), pero me gustaría saber si hay alguna forma de hacerlo sin problemas.

Por ejemplo, en KO, tan pronto como pongamos el comando foreach en el padre, simplemente podría hacer:

<!-- 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

Solo usa una etiqueta de plantilla como esta

<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>

La etiqueta de la template es la forma convencional de hacer esto, por lo que Aurelia simplemente renderizará todo lo que contiene.