Unable to access GridView from inside controller class?

Question

I'm having a problem trying to access the properties and methods on an instance from my GridView class from inside my controller. I'm sure it's a quick fix but I've been at it for a while and can't seem to figure it out. Any help is appreciated.

Unable to access _gridView from inside _controlResize

controller.js

import GridView from "./views/gridView";

class Controller {
  _gridView = new GridView();

  _controlResize() {
    console.log(this._gridView); // undefined
  }

  init() {
    this._gridView.addResizeHandler(this._controlResize);
  }
}

export default Controller;

gridView.js

class GridView {
  _tableElement = document.querySelector("[data-table]");
  _tableContainerElement = document.querySelector("[data-table-container]");

  renderCells(cells) {
    for (let row = 0; row < cells.length; row++) {
      const tr = document.createElement("tr");
      for (let col = 0; col < cells[row].length; col++) {
        const td = document.createElement("td");
        const classesToAdd = ["w-5", "h-5", "border", "border-gray-300"];
        td.classList.add(...classesToAdd);
        tr.appendChild(td);
      }
      this._tableElement.appendChild(tr);
    }
  }

  addResizeHandler(handler) {
    window.addEventListener("resize", () => {
      handler();
    });
  }
}

export default GridView;

index.js

import Controller from "./controller";

document.addEventListener("DOMContentLoaded", function () {
  const controller = new Controller();
  controller.init();
});

score 0 · Answer 1 · answered Mar 25 '21 at 08:37

Ah, figured it out! Lost the context of this when calling _controlResize from inside GridView.

Easy fix; either bind in the constructor:

class Controller {
  constructor() {
    this.controlResize = this.controlResize.bind(this);
  }

  controlResize() {
    this._controlGrid();
  }
  
  init() {
    this._gridView.addResizeHandler(this.controlResize);
  }
}

or bind in the handler:

init() {
  this._gridView.addResizeHandler(this.controlResize.bind(this);
}

Additionally using an arrow function for controlResize would also do the trick.

Unable to access GridView from inside controller class?

1 Answers1