hasChild TableRow Alloy Star Trek Tribbles Example (problem)

Hello Alloy supporters,

I love the idea what Alloy is going to be so I don't give up before I ask this question :-)

My goal is a simple TableView with child elements from a different collection. Followed by a second and infinity deep navigation through the second collection based on relation fields.

Easy example:

index.xml

<Collection src="trader"></Collection>
<Collection src="tribble"></Collection>
<Window  title="Your Tribble-Traders (Star Trek)" id="traders" onClose="killallttraders">
        <TableView  dataCollection="tribbletrader">
                <TableViewRow hasChild="true" class="row" onClick="fetchTribblesTraderGaveAway" trader="{name}">
                    <Label text="{name}"></Label>
                </TableViewRow>
        </TableView>
</Window>

originals.xml

<Window  title="Your Original Tribbles (Star Trek)" id="originals" onClose="killalltribbles">
        <TableView  dataCollection="tribble">
                <TableViewRow hasChild="true" class="row" onClick="fetchMyCopies" parent="origninal" trader="{name}">
                    <Label text="{tribbleId}"></Label>
                </TableViewRow>
        </TableView>
</Window>

copies.xml

<Window  title="Your Tribble Copies (Star Trek)" id="copies" onClose="killalltribbles">
        <TableView  dataCollection="tribble">
                <TableViewRow hasChild="true" class="row" onClick="fetchMyCopies" parent="{parentTribbleId}" trader="{name}">
                    <Label text="{tribbleId}"></Label>
                </TableViewRow>
        </TableView>
</Window>

alloy.js

// both sql adapters filled remotely (what works right...)
 
Alloy.Collections.trader = Alloy.createCollection('trader');
Alloy.Collections.tribble = Alloy.createCollection('tribble');

originals.js and copies.js

var args = arguments[0] || {};
$.tribbleid.text = args.tribbleid;
 
function fetchMyCopies(e){
var tribbles = Alloy.Controllers.tribble;
    // how to do this right ???
    var tribbleController = Alloy.createController('originals',{
        data: tribbles.fetch({query:" SELECT * FROM tribble where parentTribbleId='"+e.tribbleid+"' "});
 
    });
if(tribbleController.data.name !== null){
    $.originals.open(tribbleController.getView());
} else {
    $.copies.open(tribbleController.getView());
}
}

index.js

function fetchTribblesTraderGaveAway(e){
    var tribbles = Alloy.Controllers.tribble;
    // how to do this right ???
    var tribbleController = Alloy.createController('originals',{
        data: tribbles.fetch({query:" SELECT * FROM trader where name='"+e.trader+"' "});
 
    });
    $.originals.open(tribbleController.getView());
}
$.traders.open();

initial date for collection trader

[{"name": "Cyrano_Jones", "tribbleId": "1"}, 
{"name": "Cyrano_Jones", "tribbleId": "2"},
{"name": "Cyrano_Jones", "tribbleId": "3"}]

initial data for collection tribble

[{"trader": "Cyrano_Jones", "tribbleId": "1", "parentTribbleId": null}, 
{"trader": "Cyrano_Jones", "tribbleId": "2", "parentTribbleId": null},
{"trader": "Cyrano_Jones", "tribbleId": "3", "parentTribbleId": null}
{"trader": null, "tribbleId": "4", "parentTribbleId": "1"}, 
{"trader": null, "tribbleId": "5", "parentTribbleId": "2"},
{"trader": null, "tribbleId": "6", "parentTribbleId": "3"},
{"trader": null, "tribbleId": "7", "parentTribbleId": "4"}, 
{"trader": null, "tribbleId": "8", "parentTribbleId": "5"},
{"trader": null, "tribbleId": "9", "parentTribbleId": "6"}]

Is there an example out there I didn't find (maybe by wrong search keywords) or is this not possible ? I am thankful for any help to get the point.

When I started with Alloy I expected I simple need a TableViewRow within a TableViewRow gets its own dataController=tibbles ... but this didn't work.

Maybe I need some clarification :-)

(Also welcome: Better solutions and tips for best practice ! )