Question

I try to create my own kind in enyo

enyo.kind(
{
    name: "DeviceButton",
    kind: "Button",
    caption: "",
    published: { userAgent: "" },
    flex: 1,
    onclick: "butclick",
    butclick: function() { console.log("User agent changed to " + this.userAgent) }
})

But when I click there is nothing shown

If I just did

onclick: console.log("User agent changed to " + this.userAgent)

It was printed that this.userAgent is undefined

What am I doing wrong?

Btw., is it possible to send parameters via onclick (so that the function repsponding to the click get a variable)

Thanks

Answer 1

The problem you’re having here is that the onclick property is actually giving the name of the event handler for the Enyo to send the event to when the click is received. The “butclick” event isn’t dispatched to the DeviceButton, but rather to its parent.

If you want to handle the event entirely within your kind, then you need to set it up as a “handler”. In Enyo 2.x, you do it like this:

enyo.kind(
{
    name: "DeviceButton",
    kind: "Button",
    caption: "",
    published: { userAgent: "" },
    flex: 1,
    handlers {
      onclick: "butclick"
    },
    butclick: function() { console.log("User agent changed to " + this.userAgent) }
})

In Enyo 1.x, you’d just need to name the handler function “onclickHandler”. I mention the Enyo 1 solution because I see that you have “flex: 1” in your definition. Flexbox isn’t supported in Enyo 2, we have a “Fittable” system instead.