(MVC pattern) Почему появляется ошибка? Uncaught TypeError: handle is not a function at HTMLDivElement.

Question

При наведении на нижний серый прямоугольник, почему появляется такая ошибка? ведь я передаю handle (View.js) в качестве функции. addValue в Model.js функция. Еще пробовал в View.js addEventListener сделать не анонимной функцией, но эффект тот же.

class View{
  constructor(){
    this.bodyElement = document.querySelector('body')
    this.boxElement = this.bodyElement.querySelector('.box')

    this.bindPushArray()
    // eventObserver = new EventObserver()
  }
  bindPushArray(handle){
    this.boxElement.addEventListener('mousemove', (e) => {
      e.preventDefault()
      handle(e.clientX)
    })
  }
}

class Model {
  constructor() {
    this.arr = []
    this.value = 0
  }

  addValue(newValue){
    this.arr.push(newValue)
    console.log(this.arr);
  }
}

class Controller {
  constructor(model, view) {
    this.model = model
    this.view = view

    this.view.bindPushArray(this.handlePushArray)
  }
  handlePushArray = eCount => {
    this.model.addValue(eCount)
  }
}

const app1 = new Controller(new Model(), new View())

#root1 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
}
.div-box{
  width: 300px;
  height: 50px;
  background: rgb(121, 121, 121);
}

.box {
  width: 300px;
  height: 50px;
  background: rgb(199, 199, 199);
}

.input {
  width: 300px;
}

<div id="root1">
  <div class="div-box"></div>
  <input class="input" type="text" name="inputname" id=""/>
  <div class="box"></div>
</div>

Answer 1

Описание

Вы создаете метод bindPushArray который принимает параметр handle и зовет её как функцию.

bindPushArray(handle){
    ...
    handle(e.clientX)
    ...
}

В конструкторе зовете метод bindPushArray не давая ему параметр, соответственно параметр handle получает значение undefined.

class View{
    constructor() {
        ....
        this.bindPushArray()
    }
    ...
}

А undefined нельзя вызвать, так как она не функция. Вот и интерпретатор вам выдает:

Uncaught TypeError: handle is not a function at HTMLDivElement.

Answer 2

Попробуйте изменить ваш класс View.

Для создания события передайте фукнцию:

class View {
  constructor(){
    this.bodyElement = document.querySelector('body')
    this.boxElement = this.bodyElement.querySelector('.box')

    this.bindPushArray()
    // eventObserver = new EventObserver()
  }
  bindPushArray(handle){
    function move(e) {
      e.preventDefault()
      handle(e.clientX)
    }
    this.boxElement.addEventListener('mousemove', move);
  }
}

И есть подоздрение, что вызов метода this.bindPushArray() в конструкторе не нужен.

БЛОГ НА HUSL

(MVC pattern) Почему появляется ошибка? Uncaught TypeError: handle is not a function at HTMLDivElement.

Ответы (2 шт):

Описание