How to access children component of an enyo kind?

Question

I have a kind called RobustList, which extends Control, and it has these components:

components: [
    {name: "outerScroll",kind: "Scroller",touch: true,classes: "enyo-fit",components: [
            {name: "list",kind: "Repeater",onSetupItem: "setupItem",components: [
                    {name: "item",components: [
                            {name: "index",style: "display:none;"}
                    ]}, 
                    {name: "empty",fit: true,content: ""}, 
                    {name: "loadmore",fit: true,content: "Load More Items"}
                ]}
        ]}

]

Now I am catching the onSetupItem event, and in that function I am trying to access the children component. I am having a problem though. I was under the assumption that saying this.$ gave me access to all of the children component. Its currently only giving me access to outerscroll and list. Why is that?

Edit

---

Ok so apparently when using the List kind I can access all the children components (specifically in the create enyo function I am overriding). I'm very confused as to when its appropriate to do certain things. Like I assumed this.$ could be used everywhere. This is definitely not the case.

Answer 1

In answer to your question, yes, you can access any of the children of RobustList within the onSetupItem by using this.$. if it's a List. Check the documentation here: https://github.com/enyojs/enyo/wiki/Lists . Because of its flyweight pattern there's only one active set of controls within the List so you can refer to them directly by name.

You wouldn't want to use this.$. to access the items in a Repeater because there are many copies of the components (one for each row). Use the passed in reference (e.g. var item = inEvent.item;) to access the items within the row template.

I also notice you use 'fit: true' on a couple components in the list. You can only have one fit: true component in a FittableColumn/FittableRow. Neither of those is actually in a fittable so it won't probably do what you want.

Answer 2

setupItem:function(inSender,inEvent){
    var data = this.data;
    if(data){
        var item = inEvent.item;
        var row = data[inEvent.index];
        item.$.loadmore.set('content',row.content);
    }
},