Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Repeat multiple tags without creating a container in Aurelia

Tags:

aurelia

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:

  1. I can't put them into a container
  2. 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 -->
like image 717
Buzinas Avatar asked Sep 08 '15 16:09

Buzinas


1 Answers

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.

like image 138
PW Kad Avatar answered Nov 19 '22 00:11

PW Kad