dataAdded() is called too early

[Marco Koenen]

hello together.

I am using biggie with Wordpress + Timber. So far, everything works as expected.
Now the following problem has occurred: when I click on a link the dataAdded() function is called before the destroy() function. This will remove all my bindings immediately, as you can see on my next picture:

I think the correct order should be something like this, or am I wrong?

Here are some code snippets from sections/default.js

init(req, done, options) {
    const opts = options || { cache: true, sub: false }

    const view = this.view
    const ready = this.dataAdded.bind(this, done)
    const page = this.page = req.previous === undefined ? config.$view.querySelector(config.page) : biggie.page(req, view, opts, ready)

    req.previous === undefined && (classes.remove(page, config.isHidden), this.dataAdded(done))
}

dataAdded() {
    this.ui = query({ el: this.page })
    this.a = domselect.all('a', this.page)
    this.nav = domselect.all('a', this.nav)

    this.a && biggie.bind.add(this.a)
    this.nav && biggie.bind.add(this.nav)

    console.log('dataAdded()')
}

destroy() {
    this.a && biggie.bind.remove(this.a)
    this.nav && biggie.bind.remove(this.nav)

    this.page.parentNode.removeChild(this.page)

    this.a = null
    this.nav = null
    
    console.log('destroy()')
}

Maybe one of you has a solution or some other approach to solving the problem.

Many thanks in advance!

[Baptiste Briel]

Hello @marco-koenen,

Does this behavior blocks the whole website and makes it unusable, or is it just a curious question? I believe this is the original order. Thing is, when a destroy function is called, it should only remove the events from the previous page. It shouldn't affect the new elements coming in the new page since dataAdded and destroy binds the elements to this, referring to the specific section class.

In this example, projects.js get added and once clicked on a project, single.js gets added too. Once single.js is rendered, projects.js can be animatedOut and destroyed. What you can do is add console.log('dataAdded()') in the projects.js and single.js files instead of default.js. This way you'll really see from which section this function is called.

I think that with these current settings, bigwheel waits for the view to be animatedOut before calling the new page animateIn. If this behavior is an actual issue, you might consider looking when you're calling done(). It's a common mistake I had with bigwheel. You could also find more infos in the documentation if you didn't do it already.

[Marco Koenen]

hi @baptistebriel,

thank you for your fast reply!

Thing is, when a destroy function is called, it should only remove the events from the previous page.

Ah shit! I noticed my mistake right after your sentence. The navigation links did not work - I completely forgot that my navigation is outside my view. So I don't have to remove it in destroy() every time. I removed everything in sections/default.js that had to do with the navigation.

In app.js I added addEvents()

class App {
  constructor(opt = {}) {
    console.log(`%c${name}@${version} – ${repository.url}`, 'color: #6a6a6a')
    this.init()
  }

  init() {
    framework.init()
    this.addEvents()
  }

  addEvents() {
    this.nav = domselect.all('a', config.$nav)
    this.nav && biggie.bind.add(this.nav)
  }
}

and all routes are now working properly.
Thank you for your time, you have done an amazing work with this project!

Best,
m

[Baptiste Briel]

✌️