Wiederholen Sie mehrere Tags ohne einen Container in Aurelia Schaffung

Question

Nehmen wir an, ich habe:

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

Und nehmen wir an, dass die arr Eigenschaft meiner Ansichtsmodell ist:

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

---

Aurelia wird es machen so:

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

Aber ich brauche es so zu machen:

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

---

Es gibt zwei Bedingungen:

1. Ich kann sie nicht in einen Behälter
2. ich nicht erstellen benutzerdefiniertes Element

Und Jungs, bitte, bitte ich Sie zu verstehen, dass meine Frage ist:

Wie kann ich repeat.for verwenden, um mehrere Objekte zu wiederholen, ohne einen Container zu erstellen??

Schlage nicht vor, meinen HTML-Code oder ähnliches zu ändern, weil ich dies nur als Beispiel für etwas erstellt habe, das ich immer benötige, und immer mit der Erstellung eines Containers (oder eines containerlosen benutzerdefinierten Elements) beginne Ich habe keinen Container, aber ich würde gerne wissen, ob es irgendeinen Weg gibt, dies reibungslos zu machen.

---

Zum Beispiel in KO, sobald wir den foreach Befehl in der Eltern setzen, konnte ich einfach tun:

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

Verwenden Sie einfach eine Vorlage Tag wie folgt

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

Der Tag template ist der konventionelle Weg, um dies zu tun, damit Aurelia einfach alles darin rein macht.