Qfyilyi

The Dio.js GitHub page

My Dio.js issue on github with owner's suggestion that didn't work

The goal is to render dom elements and attach an event that is in the same object as the render function

When the webpage loads, I call an init function that render some divs and attach a click event to a function in the same object.

var thecheckbox = (function() {

  function x() {}



  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.init = function() {

    let mybody = document.createElement('div')

    document.body.appendChild(mybody)





    d.render(this.render, protekBody)

  }

  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()

})()



// Initialize

_addEvent(document, 'ready', function() {

  thecheckbox.init()

})

I talked to the owner of the repo here (https://github.com/thysultan/dio.js/issues/85) and it still doesn't work as he explained.

I need to be able to access the object's properties outside the scope of Dio but attach an event to a dio dom element.

I tried converting the object to a regular object (not instantiated) and call d.render(d.h(thecheckbox), mydiv) but it doesn't works.

@HypeWolf

Maybe you could try the following:

function x() {

  this.activate = this.activate.bind(this)

}

or as alternative:

onClick: () => this.activate()

And I think you should also do something like:

d.render(() => this.render(), protekBody)