How to refer to object's 'this' with a function linked to Dio?

[Extarys]

I there, I just started using Dio and I love it! It's fast and simple.

I have a little issue thouth, I created a class and attached a function to a onclick event in Dio and I can no longer refer to my object within the function.

function myclass() {}

myclass.prototype.activate = function() {
  console.log('activate')
}
myclass.prototype.onclick = function(e, props, state, context) {
   console.log('clicked', e)
   this.activate() // this refer to the div element here and not the object myclass
}
var Webpage = new myclass()
...
d.h(
        'div',
        { class: 'content', onClick: Webpage.activate }
)

Can someone point me out how I should do this?

[Sultan]

The following diff illustrates how you might do this. Demonstrating that you don't need to instantiate the class by yourself.

-var Webpage = new myclass()
myclass.prototype.render = function () {
return h('div', {class: 'content', onClick: this.activate})
}
-d.h(
-        'div',
-        { class: 'content', onClick: Webpage.activate }
-)
+ h(myclass)

[Extarys]

thanks for your reply. I reformatted a part of the code, here it is:

var thecheckbox = (function() {
  function x() {}

  x.prototype.drawInForms = function() {}
  x.prototype.isActivated = false // True when the user click the checkbox
  x.prototype.init = function() {
    let bodydiv = document.createElement('div')
    document.body.appendChild(bodydiv)


    d.render(this.render, bodydiv)
  }
  x.prototype.activate = function() {
    console.log('Activate')
    var _this = this
    if (!_this.isActivated) {
      _this.isActivated = true
      var checkbox = document.getElementsByClassName('checkbox')[0]
      checkbox.getElementsByClassName(
        'checkbox2'
      )[0].style.display = 'block'

    }
  }
  x.prototype.render = function() {
    var _this = this
    return d.h(
      'div',
      { class: 'normal light' },
      d.h(
        'div',
        {
          class: 'content'
        },
        d.h(
          'div',
          {
            class: 'inline-block',
            onClick: this.activate // <<<---------
          },
          
        ),
        d.h(
          'div',
          { class: 'inline-block' },
          d.h(
            'div',
            { class: 'center' },
            d.h('div', { class: 'label center' }, strings.checkme)
          )
        )
      )
    )
  }

  return new x()
})()

The event seems to be attached in the Firefox inspector to the Dio handleEvent function but clicking doesn't do anything.
Attaching a normal function like alert does work. Should I open this question on StackOverflow? It seems this is my code and not Dio after all :/

[Sultan]

You shouldn't need to invoke the class yourself. i.e where you returnnew x() you should instead return the constructor x and pass it as a type to h. i.e: h(thecheckbox). Dio will instantiate the class when rendering.

The issue i think you are experiencing is because of this, and in addition with the following line d.render(this.render, bodydiv) you pass the render method on x as a function(component), this is thus no longer the same this that activate is a prototype of so you end up setting onClick to undefined.

[Extarys]

If I invoke the class with dio I will not be able to access it's properties outside of dio, no?

Also... d.h(thecheckbox) doesn't render anything, I also tried with d.render(thecheckbox, mydiv) with no success.

Thanks for your time, I'll try and figure this out, I don't want to be a burden :P

[Sultan]

It should be d.render(d.h(thecheckbox), mydiv). but it will only work if you pass d.h a function as the first argument.

[Extarys]

It still doesn't work :( I opened a SO question maybe we'll figure something out :/

[Extarys]

Here is my SO question that is still unanswered, just in case: https://stackoverflow.com/questions/53435515/how-to-attach-an-objects-function-to-a-dio-js-event

[Zolmeister]

replace return new x() with return x - then thecheckbox.prototype.init()