Предположим, что:
<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>
И пусть предположим, что свойство arr
моего ViewModel:
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-код или что-то в этом роде, потому что я создал это только как пример того, что мне всегда нужно, и всегда заканчиваю, создавая контейнер (или пользовательский элемент без контейнера, t есть контейнер), но я хотел бы знать, есть ли способ сделать это плавно.
Например, в 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 -->