Correct way to use custom Javascript?

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!

[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);

[magicspon]

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