Unable to add components(buttons) dyanamically in Enyo

Question

I am using a window view in Enyo, which basically fetches data from database, and based on the no. items fetched, multiple buttons are created dyanamically. On click of any of the button, an another call to database is made to fetch other set of items. The fetched items need to be added dyanamically to a <ul> item as buttons. Which is done by the code -

testPOSView : function(inSender, inEvent) {
        var data = inEvent.data;
        console.log(data.tables);
        enyo.forEach(data.tables, function(table) {
            console.log(table);
            this.$.sectiontablebar.createComponent({
                kind : 'OB.OBPOSPointOfSale.UI.TablesButton',
                button :  {
                    kind : 'OB.UI.Section',
                    content: table.tableName,
                    id: table.tableId
                }
            });
        }, this);
    }

But when i click on the button, i am getting the results from DB, but they are not added to the sectiontablebar component.

The complete code of the file is available @ https://gist.github.com/sangramanand/ad665db9cd438001254a

Any help would be appreciated. Thanks!!!

Answer 1

I'm not certain this is the way to do it, but when I create subcomponents dynamically, I add this.render() to the end of the function. This renders the component, thus showing the dynamically added content.

If I were to rewrite your code I would do it like this:

testPOSView : function(inSender, inEvent) {
    var data = inEvent.data;
    enyo.forEach(data.tables, function(table) {
        // create the sub-component in "this"
        this.createComponent({
            // and assign the container
            container: this.$.sectiontablebar,
            kind : 'OB.OBPOSPointOfSale.UI.TablesButton',
            button :  {
                kind : 'OB.UI.Section',
                content: table.tableName,
                id: table.tableId
            }
        });
    }, this);
    this.render();
}

Answer 2

More than likely you are losing the pointer to this when testPOSView is running after an async call to get the db results.

In your anythingTap function (see gist, readers) you might try binding the function you're sending to OB.DS.Process:

this.bindSafely(function(data) {me.doTestPOSView();}))

By the way, you can probably eliminate all that me = this tomfoolery if you bind your functions properly.