Let's suppose I have:
<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>
And let's suppose that the arr
property of my ViewModel is:
arr = [
{ id: 'txtID', name: 'ID', value: '' },
{ id: 'txtFirstName', name: 'First Name', value: '' },
{ id: 'txtLastName', name: 'Last Name', value: '' }
];
Aurelia will render it like this:
<!-- 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 -->
But I need it to render like this:
<!-- 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 -->
There are two conditions:
- I can't put them into a container
- I can't create a custom element
And, guys, please, I kindly ask you to understand that my question is:
How can I use repeat.for to repeat multiple items without creating a container?
Don't suggest to change my HTML, or anything like that, because I've created this only as an example for something I always need and always end by creating a container (or a containerless custom element, when I can't have a container), but I'd like to know if there is any way of doing this smoothly.
For example, in KO, as soon as we put the foreach
command in the parent, I could simply do:
<!-- 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 -->