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:
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 -->
Just use a template tag like this
<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>
The template
tag is the conventional way to do this so Aurelia will simply render everything inside there.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With