Подтвердить что ты не робот

Повторите несколько тегов без создания контейнера в Aurelia

Предположим, что:

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

Ответ 1

Просто используйте тег шаблона, подобный этому

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

Тег template является обычным способом сделать это, чтобы Aurelia просто отображала все внутри.