如何将对象的函数附加到Dio.js事件?

时间:2018-11-22 17:01:21

标签: javascript

The Dio.js GitHub page

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

目标是渲染dom元素并附加一个与render函数位于同一对象中的事件

加载网页时,我调用了一个初始化函数,该函数可以渲染一些div,并将click事件附加到同一对象中的函数上。

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

我在这里与仓库的所有者(https://github.com/thysultan/dio.js/issues/85)进行了交谈,但按照他的解释,它仍然无法正常工作。

我需要能够访问Dio范围之外的对象的属性,但要将事件附加到dio dom元素上。

我尝试将对象转换为常规对象(未实例化)并调用d.render(d.h(thecheckbox), mydiv),但它不起作用。

1 个答案:

答案 0 :(得分:0)

@HypeWolf

也许您可以尝试以下方法:

function x() {
  this.activate = this.activate.bind(this)
}

或替代:

onClick: () => this.activate()

我想你也应该做类似的事情:

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