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.