Aurelia template form with Object Array


How do I create aurelia forms with an binded object array?
I have a main object that includes an array of sub-objects. Now I want to create one html form providing fields for the main object and all sub-objects, so that the user can add objects to the array dynamically.

 <input type="text" name="header-title" value.bind="object.header" />
<input type="text" name="sub-object1-title" value.bind="object.subObjects.title" />
<input type="text" name="sub-object2-title" value.bind="object.subObjects.title" />
... dynamically ...


Can someone give me a hint, how to code that?


Is this what you mean?


export class App {
  items = [];
    this.items.push(new Item("item1","This is item 1"));
    this.items.push(new Item("item2","This is item 2"));
    this.items.push(new Item("item3","This is item 3"));

class Item{
  constructor(name, value){ = name;
    this.value = value;


  <div repeat.for="item of items">
    <input type="text" name="" value.bind="item.value" />

Then you can just push a new item on to the array when needed.


Many thanks. Now I have one additional question. Is there any trick in aurelia to add new “dynamic” DOM elements to the Aurelia-Binding-Template?

Currently new elements are not considered by aurelia (e.g. using the Bootstrap collapsable).


Not completely sure what you mean, but this works to show/hide using bootstrap collapse.

  <div repeat.for="item of items">
    <a href="#" data-target="${'#' +}" data-toggle="collapse">Toggle ${}</a>
    <input class="collapse" type="text" id="${}" name="" value.bind="item.value" />


Thank you for the response. Yes, this example works. I found my mistake… adding new elements to the array (e.g. with a button with click.delegate=“addNewItem()”) I forgot to give the new item a key so that the collapse had no unique identifier.

Many thanks for taking the time to give support. :slight_smile: