How do I create buttons at runtime in Enyo?

Question

I need a app to display buttons that are created at runtime. The reason is that I will be getting information from a service to see how many buttons I need.

Currently the program runs but no buttons are displayed.

I'm trying to use a toolbar and set the control property in the create function. The program runs OK but my toolbar has no buttons? Is there a way to do this?

code:

// Trying to create buttons at run time
name: "MyApps.MainApp",
kind: enyo.VFlexBox,
components: [
        {kind: "PageHeader", content: "Template"},
        {kind: "Toolbar", name: "tabsted"},
        {name: "feedUrl", kind: "Input", flex: 1},
        {kind: "HtmlContent", name: "comments", content: "hello world <br> and another lin"},
        {name:"curValue", content:("Sample Text \r\n and more")},
        {kind: "Button", caption: "Action", onclick: "btnClick"},
],

// this gets called first ha
create: function()
{
    this.inherited(arguments);

    this.$.tabsted.components= [
            {caption: "a"},
            {caption: "b"},
            {caption: "c"}
    ];

    this.LoadCommments();
    },

    LoadCommments: function()
    {
        this.$.comments.content="fred";   
    },

    // called when button is clicked
    btnClick: function() 
    {
        this.$.curValue.setContent("Put some text here");  // handle the button click
    }
};

Answer 1

You'll want to take a look at the API documentation for Enyo.Component. Specifically, the section on creating components dynamically. Try the following change to your code:

    this.$.tabsted.createComponents([
        {caption: "a"},
        {caption: "b"},
        {caption: "c"}
    ], {owner: this});

Also, in the LoadComments function you'll want to call 'setContents' instead of trying to directly update the value of contents.