this.rerender() undefined

Hi!

Noob here so I might just be missing something obvious or complicating things for no reason.

I am in a situation where I have to create a choo component that sets its width and height values by first loading an image as a child node, and then using that image to defines width and height of the root node. That works.

The problem comes when I add a resize EventListener and try to rerender() the component. If I log the function this.rerender() I always get undefined.

Some relevant code (file here):

load (el) {
  const resize = () => {
    if (el.firstChild.firstChild.nodeName.toLowerCase() === 'img') {
      this.width = el.firstElementChild.clientWidth
      this.height = (el.firstElementChild.firstChild.dataset.height / el.firstElementChild.firstChild.dataset.width) * el.firstElementChild.firstChild.clientWidth
    } else {
      this.width = el.firstElementChild.firstChild.clientWidth
      this.height = (el.firstElementChild.firstChild.firstChild.dataset.height / el.firstElementChild.firstChild.firstChild.dataset.width) * el.firstElementChild.firstChild.firstChild.clientWidth
    }

    this.rerender.bind(this)()
    console.log( this.rerender.bind(this)() )
}

resize()

window.addEventListener('resize', function () {
  resize()
})

}

update (el) {
  return true
}

and how I create the component (file here):

function entry (state, emit) {
  return ov(page[0].children).map(function (item, i) {

  var card = state.cache(Card, i)
    return card.render(state, emit, item, i, state.cards[i])
  })
}

Could it be that state.cache does not see that I am changing the width and height values when resizing the page, so… I should be explicit about that?

Thanks, af

[sonn-gamm]

Ahah, yeah! You’re actually right — just tested 😅

Thanks @goto-bus-stop for the extra eyes on the code 👍

[goto-bus-stop]

In your first line you’re using:

el.firstElementChild.clientWidth

as the this.width value. But in the second line you’re multiplying by

el.firstElementChild.firstChild.clientWidth

that’s probably what’s causing the difference