Before you want to nest controls such as ListView inside a ListView,
you should understand how templates work on a high level. Lets look at
a basic template first (simplified):
HTML:
<div id="myListView">
</div>
<div class="template">
<div id="myListViewTemplate">
<div id="myListViewItemTemplate">
<span id="nameLabel"></span>
</div>
</div>
</div>
Atlas script:
<listView targetElement="myListView">
<layoutTemplate>
<template layoutElement="myListTemplate" />
</layoutTemplate>
<itemTemplate>
<template layoutElement="myListViewItemTemplate">
<label targetElement="nameLabel">...</label>
</template>
</itemTemplate>
</listView>
This is just a ListView which displays a label (span) for each item.
When we define a template, such as the item template, we can define
what kind of controls the elements inside the context of that template
is. In this example we say that the element "nameLabel", inside the
element "myListViewItemTemplate", is a label.
When you bind the listview against for example a datasource with 2
items, Atlas will clone the "myListViewItemTemplate" element to create
an item instance that will be added to the DOM. Atlas will look at your
Atlas definitions and instantiate and initialize the components
associated with the elements inside this item instance.
In your case, you should do exactly the same with a nested listview as you do with a label.
That is, you should first define the nested listview inside the parent
listview's item template. The HTML for a listview with a nested
listview could look something like this:
<div id="myListView">
</div>
<div class="template">
<div id="myListViewTemplate">
<div id="myListViewItemTemplate">
<span id="myNameLabel"></span>
<div id="myNestedListView">
</div>
<div class="template">
<div id="myNestedListViewTemplate">
<div id="myNestedListViewItemTemplate">
<span id="myNestedNameLabel"></span>
</div>
</div>
</div>
</div>
</div>
</div>
And the Atlas code would then look something like:
<listView targetElement="myListView" ...>
<layoutTemplate>
<template layoutElement="myListTemplate" />
</layoutTemplate>
<itemTemplate>
<template layoutElement="myListViewItemTemplate">
<label targetElement="nameLabel">...</label>
<listView targetElement="" ...>
<layoutTemplate>
<template layoutElement="myNestedListViewTemplate" />
</layoutTemplate>
<itemTemplate>
<template layoutElement="myNestedListViewItemTemplate">
<label targetElement="myNestedNameLabel">....</label>
</template>
</itemTemplate>
</listView>
</template>
</itemTemplate>
</listView>
I haven't actually tried this, but this should work. Please let me know if this makes sense.