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

17

Предположим, что у меня есть:

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

Существует два условия:

  1. Я не могу поместить их в контейнер
  2. Я не могу создать пользовательский элемент

И, ребята, пожалуйста, я прошу вас понять, что мой вопрос:

Как я могу использовать 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 -->
    
задан Buzinas 08.09.2015 в 18:20
источник

1 ответ

27

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

<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 просто отображала все внутри.

    
ответ дан PW Kad 08.09.2015 в 18:51
источник
  • Просто будьте осторожны с попыткой использовать тег шаблона в IE внутри таблицы, например. для повторения нескольких элементов td. Это невозможно с IE. См. Github.com/aurelia/html-template-element/issues/3 –  thinkOfaNumber 26.10.2017 в 06:25