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