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 ?

score 0 · Answer 1 · edited Feb 26 '21 at 22:11

0

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

edited Feb 26 '21 at 22:11

Dharman

30,962
25
85
135

answered Feb 26 '21 at 22:06

Bill Sourour

1,153
1
10
20

Sorry, these were my typos from posting for the first time: – Feb 26 '21 at 23:57
I reposted more complete code base now which will provide better understanding of what I'm trying to achieve. Since I'm dealing with this for over a week, starting to think I need to pay some assistance here... – Feb 27 '21 at 00:01

score 0 · Answer 2 · answered Mar 17 '21 at 19:50

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

MVC Intersection Observer structure

2 Answers2