Thursday, 29 November 2018

How to attach an object's function to a Dio.js event?

The Dio.js GitHub page

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.



from How to attach an object's function to a Dio.js event?

No comments:

Post a Comment