Enyo, dynamically creating Components, can’t change their properties or get the events to fire

Question

I’m trying to dynamically create a list of buttons in a ToolBar. The events are not going off, and when I try to change there properties I get a “uncaught typedef: Cannot call methed setcaption on undefined” I have the following code that create the buttons,

LoadTabs: function()
{
   this.$.tabs.createComponents([
    {name: "mycusbut", caption: "b",onclick: "btnClick" }, // this event never goes off!!!!
    {caption: "b"},
    {caption: "c"}
]);
//   this.$.frediop.setCaption("Put some text here");  // handle the button click
},

The event btnClick never goes off, and the code that tries to change the property.

btnClick: function() 
{
  this.$.mycusbut.setCaption("Put some text here");  // get a undefined object error
}

Answer 1

The way we're creating the buttons here will cause them to appear on the tabs object. If you want to reference those you'll need to use the following syntax:

this.$.tabs.$.mycusbut

The second issue about the code not being called is a bit more insidious... Because you are creating the buttons on the tab object it's looking for the function on the tab object, which is probably not what you want. You'll either want to separate out the tab object into its own kind and have an event you can fire when the button is clicked or you'll want to take a different approach to creating the objects. Perhaps making a toolbar kind that you can dynamically create buttons on would be a good approach?

Edit: An even simpler approach is to tell the createComponent to set the owner to the main kind. Alter it as follows:

this.$.tabs.createComponents([
    {name: "mycusbut", caption: "b",onclick: "btnClick" },
    {caption: "b"},
    {caption: "c"}
], {owner: this});

Now your code should work as you expect.