MVC Intersection Observer structure

Question

I wonder if someone can assist me with MVC architecture. I took a course in MVC from Udemy and now I have a pet project I'm working on. In a nutshell. I have three JS files: controller, model and view.

I am watching activeHeading2 element and it a user scrolls past it, manipulates classes on two elements. Anyways, What's happening now is when a user clicks and displays a new section with new activeHeading2 element, Observer still observes old section activeHeading2 in the view even if I tell it to unobserve or even disconnect. I am stuck on this for like a week now, any information or help would be beneficial.

I am not using any frameworks and this is vanilla JS in action:

// CONTROLLER:

 constructor(model, view) {
    this.view = view;
    this.model = model;

    // Init here:
    this._cycleHeaderFooter();
    this._refreshActiveElements();
    this.view.bindToTop(this._handleToTop);
    this.view.bindNavClick(this._handleNavClick);
    this.view.bindObserver(this._handleObserver);
    
  }

_handleNavClick = clicked => {
    //View adjustment here
    // Unobserve first before resetting ? 
    this.view.resetNavigation();
    this.view.displaySection(clicked);
    this._refreshActiveElements();
    this.view.observe();
    this.view.displayFooter();
    this.view.activateNav(clicked);

  }
const app = new Controller(new Model(), new View());

export default class View {
  constructor() { }

  bindObserver(fn){
    // DOM, EVENTS,
 
    fn(this.activeHeading2);
}

  observe(activeHeading2){
    const toggleObserver= (obs, img) =>{
      console.log(obs);
      if (obs === 'hide') {
        this.main__topEl.classList.add('inactive');
        this.headerEl.classList.remove('stickyHeader');
      }
      if (obs === 'show') {
        this.main__topEl.classList.remove('inactive');
        this.headerEl.classList.add('stickyHeader');
      }
      if (obs === 'img') {
        // console.log(img.dataset.src);
        img.src = img.dataset.src;
        // Remove blur filter .lazy-img class
        img.classList.remove('lazy-img');
      }
    }
        const callback = function (entries, observer) {
      const [entry] = entries;

    
      if (entry.target === activeHeading2) {
        entry.isIntersecting ? toggleObserver('hide') : toggleObserver('show');
      }
    }
    const options = {
      root: null,
      threshold: 0,
    }
    let heading2Obs = new IntersectionObserver(callback, options);
    
    heading2Obs.unobserve(this.activeHeading2);
    heading2Obs.observe(this.activeHeading2);
  }
}

Not sure why the view is stuck with old values?

Answer 1

To run code on instantiation of a class, you need a method called contructor not construction .

Also in your code the view parameter passed into the constructor is not the same as this.view , you need to assign it. See code below as an example of what I mean.

class Controller {
  constructor(model, view) {
     this.view = view;
     this.view.bindObserver(this._handleObserver);
  }
 _handleObserver = (activeHeading2) => {
    this.view.observe(activeHeading2);
  }
}

Answer 2

Trick to MVC Architecture is knowing how to import each JavaScript class so that it is accessible to other modules. Example:

class View {

}

export default new Class();

--> Then in controller: import view from './view.js'

this will allow controller to see all elements and methods inside that class.