Barba: Correct way to use custom Javascript?

[TK94]

Hey,

First of all, thanks for Barba.js it's awesome. But I've a problem/question.

What is the right way to use custom Javascript? Right now I use functions, which I call 'onEnter'. But when I change from page the previous code will still be executed. How can I only execute the code on the current page? Because I get errors in de log because elements do not exists.

`var Home = Barba.BaseView.extend({
    namespace: 'home',
    onEnter: function() {
        /* ---------------------------------------
        The new Container is ready and attached to the DOM.
        --------------------------------------- */

        // Add custom JS for the homepage
        $.fn.addHome();

    }
});

var Contact = Barba.BaseView.extend({
    namespace: 'contact',
    onEnter: function() {
        /* ---------------------------------------
        The new Container is ready and attached to the DOM.
        --------------------------------------- */

        // Add custom JS for the contact page
        $.fn.addContact();

    }
});

$.fn.addHome = function() {
    // Do Something
}

$.fn.addContact = function() {
    // Do Something
}`

Thanks!

[magicspon]

you could wrap all of your custom javascript in a function...
and then call that function once barba has finished transitioning between pages.

[TK94]

Thanks for your response, how do I call the function once?

As you can see in my example I wrapped everything in functions and call it onEnter.

[magicspon]

like so:

Dispatcher.on('transitionCompleted', () => {
  // call your wrapper function from here
  allMyFancyJSPotatoes()
})

[TK94]

Thanks for your help. Unfortunately it didn't fix my problem.

After going to another page my JS is still calculating the top of an element which is not on the new page which results in an "Uncaught TypeError: Cannot read property 'top' of undefined" error...

[magicspon]

You will need to destroy any behaviors from the previous page that could still be running.

For example... If you had a slide on page 'A', you would need to destroy it when you move to a new page.

Barba is fantastic... but it does add a fair chunk of complexity and possible memory leaks.

[bradleyDouglas]

@TK94 Did you ever figure this out? I'm running into the same issue right now.

[TK94]

@bradleyDouglas, a bit. Not for my offset().top problem. But other errors like Slick slider's "Cannot read property 'slidesToShow' of undefined" I fixed to unslick() on "newPageReady" if current page doesn't need the slider.

So if someone knows how to fix "Uncaught TypeError: Cannot read property 'top' of undefined" please tell me ;)

[bradleyDouglas]

@TK94 I figured it out. I created views and in my particular view that used the Scroll Event listener with Height and Top, I registered my event onEnter and de-registered my event onLeave.

onEnter: window.addEventListener('scroll', myFunction);
onLeave: window.removeEventListener('scroll', myFunction);

OR (jQuery)

onEnter: $(window).on('scroll', myFunction);
onLeave: $(window).on('scroll', myFunction);

[TK94]

@bradleyDouglas Unfortunately I still get "Cannot read property 'top' of undefined"

[bradleyDouglas]

@TK94 Are you using jQuery? If so, I mistyped the onLeave line. Assuming you caught it, but if not it should be:

onLeave: $(window).off('scroll', myFunction);