Enyo hierarchy. this.$ include all components, even those with nesting order 2

Question

Why in component

var matrix = new enyo.Control({
    name:"Matrix",
    tag: "div",
    classes : 'strategies',
    /*handlers: {
        init: "initHandler"
    },*/
    components: [
        { tag: "div", classes: "blankblock", content: '&nbsp' },
        { tag: "div", classes: "label1", content: 'Player A' },
        { tag: "div", classes: "label2", content: 'B' },
        { name:'matrixTable', tag: "table", components: [
            { name: 'tr1', tag: 'tr', components: [
                { tag: 'td', components: [{tag: 'input'}]},
                { tag: 'td', components: [{tag: 'input'}]}
            ]},
            {tag: 'tr', components: [
                {tag: 'td', components: [{tag: 'input'}]},
                {tag: 'td', components: [{tag: 'input'}]}
            ]}
        ]} ,
        { name: 'addV', tag: "button", classes:'addV', content: "+", ontap: "addRow" },
        { name: 'addH', tag: "button", classes:'addH', content: "+", ontap: "addColl" }
    ],
    addRow: function(inSource, inEvent){
      this.$.matrixTable.createComponent
      alert(this.$.matrixTable.$.toSource());
    },
    addColl: function(inSource, inEvent){

    }
});

this.$ include all components, even those with nesting order 2

I expect this.$.matrixTable.$.tr1 but I have this.$.tr1

Answer 1

Because you declared them as part of the Matrix kind then Enyo will have them all owned by the Matrix kind. If you want them to be owned as you described then you need to break out the MatrixTable kind into its own separate kind. If you want to enforce that encapsulation then you need to create a kind to hide it.

Further, you should always avoid going two levels deep into a kind. In other words, this.$.matrixTable.$.tr1 would be bad form. Make properties or add functions to return values.

Answer 2

In enyo you need to be aware of two chains: owner chain vs parent-child chain. Whereas "matrixTable" is a parent of "tr1", an owner of "tr1" is "Matrix".

So to get to "tr1" from "Matrix", you can go two ways:

this.$.tr1 or this.children[3].children[0],

similarly, to get to "Matrix" from "tr1" you can do:

this.$.tr1.owner or this.$.tr1.parent.parent

This way, no matter how deeply nested are your components, the owner will always be the kind within which the component is defined.