javascript - 如何将对象的功能附加到 Dio.js 事件？

Question

The Dio.js GitHub page

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

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

当网页加载时，我调用一个 init 函数来呈现一些 div 并将点击事件附加到同一对象中的函数。

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

我在这里和 repo 的所有者 ( https://github.com/thysultan/dio.js/issues/85 ) 谈过，但它仍然没有像他解释的那样工作。

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

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

Answer 1

@炒狼

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

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

或者作为替代:

onClick: () => this.activate()

而且我认为您还应该执行以下操作:

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