JavaScript Класс распознается как неопределенный

Question

Я работаю над личным проектом и получаю сообщение об ошибке, при котором, когда я ссылаюсь на объект из другого класса, он распознается как неопределенный. То, что я сейчас делаю, чтобы получить ошибку, - это то, что я пытаюсь изменить данные, хранящиеся в локальном хранилище, с помощью формы, чтобы обновить их. Я буквально не вижу, что я сделал не так, поэтому я хотел бы еще один глаз.

EventController. js

import EventModel from '/Models/EventModel.js'
import EventView from '/Views/EventView.js'

class EventController{

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

        this.onEventChanged(this.model.event_)
        this.view.bindChanges.bind(this, this.handleEditEventName,this.handleEditEventTime,this.handleEditEventDay)
        this.model.bindChanges.bind(this,this.onEventChanged)
    }

    onEventChanged (event) {
        this.view.displayEvent(event)
    }


    handleEditEventName(eventName){
        console.log(eventName)
        this.model.editEventName(eventName)
    }

    handleEditEventDay(eventDay){
        this.model.editEventDay(eventDay)
    }
    handleEditEventTime(eventTime){
        this.model.editEventTime(eventTime)
    }


}

const app = new EventController(new EventModel(), new EventView())

EventModel. js

localStorage.setItem("event_", JSON.stringify({
    eventId: 0, 
    eventName: "D", 
    eventDay:"B",
    eventTime: "C",
    eventLabTechs: []
}))
export default class EventModel {

   // State of the model, the attributes of an event, prepoulated with some data
    constructor(){
        this.event_ = JSON.parse(localStorage.getItem('event_'))

    }
   // Adding a Lab Tech to a given event
    addLabTech(labtech){
        this.event_.eventLabTechs.push(labtech)
    }

    editEventName(name){
        this.event_.eventName = name
    }

     editEventDay(day){
         this.event_.eventDay = day
     }
     editEventTime(time){
         this.event_.eventTime = time
     }
     bindChanges(callback){
         this.onEventChanged = callback
     }
     _commit(event) {
        this.onEventChanged(event)
        localStorage.setItem('todos', JSON.stringify(event))
      }
}

EventView. js

export default class EventView {
    constructor(){

        this.app = this.getElement('#root')

        this.EventBody = this.createElement('div','Event_Card')
        this.EventTitle = this.createElement('h1')
        this.EventDate = this.createElement('p')
        this.EventBody.append(this.EventTitle,this.EventDate)

        this.editForm = this.createElement('form')
        this.nameInput = this.createElement('input')
        this.dayInput = this.createElement('input')
        this.timeInput = this.createElement('input')
        this.nameInput.type = 'text'
        this.dayInput.type = 'text'
        this.timeInput.type = 'text'
        this.nameInput.placeholder = 'Enter new event name'
        this.dayInput.placeholder = 'Enter new day of event'
        this.timeInput.placeholder = 'Enter new time of event'
        this.submitButton = this.createElement('button')
        this.submitButton.textContent = 'Make Changes'

        this.editForm.append(this.nameInput,this.dayInput,this.timeInput,this.submitButton)
        this.app.append(this.EventBody,this.editForm)
    }

    // Create an element with an optional CSS class 
    createElement(tag, className) {
        const element = document.createElement(tag)
        if (className) element.classList.add(className)

        return element
      }

      // Retrieve an element from the DOM
      getElement(selector) {
        const element = document.querySelector(selector)

        return element
      }



    displayEvent(event){
        this.EventTitle = event.eventName
        this.EventDate =  event.eventDay + "\n" + event.eventTime
    }

    get _nameText() {
        return this.nameInput.value
         }
    get _dayText() {
        return this.dayInput.value
      }
    get _timeText() {
        return this.timeInput.value
      }

      _resetInput() {
        this.input.dayInput.value = ''
        this.input.naneInput.value = ''
        this.input.timeInput.value = ''
      }
      bindChanges(nameHandler,timeHandler,dayHandler){
        this.editForm.addEventListener('submit', event => {
            event.preventDefault()
            console.log(this._dayText,this._timeText,this._nameText)
            if (this._nameText != '' && (this._dayText === '' && this._timeText === '')){
                nameHandler(this._nameText)
                this._resetInput()
            }
            else if(this._dayText != '' && (this._nameText === '' && this._timeText === '')){
                timeHandler(this._dayText)
                this._resetInput()
            }
            else if(this._timeText != '' && (this._dayText === '' && this._nameText === '')){
                dayHandler(this._timeText)
                this._resetInput()
            }
            else if(this._nameText != '' && this._dayText != '' && this._timeText != ''){
                nameHandler(this._nameText)
                timeHandler(this._dayText)
                dayHandler(this._timeText)
                this._resetInput()
            }
        })
    }
}

Сообщение об ошибке :

>EventController.js:21 Uncaught TypeError: Cannot read property 'model' of undefined

Answer 1

Кажется, код имеет много проблем: // EventModel. js

get event_(){
       return this.event_ // return same things ??
   }

// привязка должна быть такой

this.view.bindChanges(this.handleEditEventName.bind(this),this.handleEditEventTime.bind(this),this.handleEditEventDay.bind(this))