Trying to generate a list of lists

[lookaflyingdonkey]

Hi,

Started playing around with Zombie and was trying to generate a list of lists. I was able to get multiple lists showing by editing the arrow list sample to have a hardcoded number of lists

this._exported['arrowList1'].setSource(source1);
this._exported['arrowList2'].setSource(source2);

and

<div class="s-list-static__slider-wrapper">
    {{% ArrowList, {options: {padding: 5, lineSize: 1}, itemClass: ListItemList}, arrowList1 }}
    {{% ArrowList, {options: {padding: 5, lineSize: 1}, itemClass: ListItemList}, arrowList2 }}
</div>

I would like to be able to make this dynamic though, I started by trying to make a vertical list with a list item renderer that rendered another horizontal list, but seem to be getting stuck.

The datasource for the wrapping vertical list looks like

new DataList([new DataList(this._generateData(0, 30)), new DataList(this._generateData(0, 30))])

Then the arrow list itself is

{{% ArrowList, {options: {padding: 5, lineSize: 1}, itemClass: ListItemList, isVertical: true}, arrowList1 }}

With ListItemList.js being

export default class ListItemList extends UIBaseListItem {
  
	/**
	 * @override
	 */
	_createContainer() {
    console.log('ListItemList data', this._data);
		const result = render({_exported: {items: this._data}, items: this._data});

		this._container = (findFirstElementNode(result.root));
	}
}

and ListItemList.jst

<div class="s-list-static__slider-wrapper">
	{{% ArrowList, {options: {padding: 5, lineSize: 1}, itemClass: BaseListItem}, items }}
</div>

It seems to output the HTML of a vertical slider with 2 child sliders inside, but those sliders have no items.

The console.log('ListItemList data', this._data); seems to show a list with 30 items in it, but somehow it isn't connecting up in the list.

Am I going about the right way or over complicating?

Thanks!