The ListBox widget is not render new items when adden it on the array bind object.

[danielmeza]

I´m using a listbox widget and bind the datasource to and array on my model, when I add new records to the array the listbox is not render it. the only way when the list box is render the items is when the items are initialize on the array.

[JeroenVinke]

@danielmeza databinding is pretty difficult for these kinds of controls, try the following

<template>
  <div class="ctrllabel">Select a car</div>
  <ul ref="selectbike" ej-list-box="e-data-source.bind:BikeList; e-fields.bind:fields"></ul>

  <button click.delegate="change()">Change data</button>
</template>

export class RemoteData {
  constructor() {
    this.fields = { id: 'empid', value: 'text' };
    this.BikeList = [
      { empid: 'bk1', text: 'Aache RTR' }, { empid: 'bk2', text: 'CBR 150-R' }, { empid: 'bk3', text: 'CBZ Xtreme' },
      { empid: 'bk4', text: 'Discover' }, { empid: 'bk5', text: 'Dazzler' }, { empid: 'bk6', text: 'Flame' },
      { empid: 'bk7', text: 'Fazzer' }, { empid: 'bk8', text: 'FZ-S' }, { empid: 'bk9', text: 'Pulsar' },
      { empid: 'bk10', text: 'Shine' }, { empid: 'bk11', text: 'R15' }, { empid: 'bk12', text: 'Unicorn' }
    ];
  }

  change() {
    let data = this.BikeList.slice();
    data.push({ empid: 'bk_new', text: 'Aache RTR' });
    this.BikeList = data;
    $(this.selectbike).ejListBox('model.dataSource', this.BikeList);
  }
}