MVP

by Krzysztof Safjanowski

HTML

<input type="text" id="name">
<input type="text" id="surname">
<pre id="message"></pre>
<button id="save">Save</button>

JavaScript

class Model {
  constructor(name, surname) {
    this.name = name
    this.surname = surname
  }
}

class View {
  constructor(presenter) {
  	this.presenter = presenter
    
    const save = document.getElementById('save')
    
    
    save.onclick = function() {
    	this.save()
    }.bind(this)
  }
  
  save() {
    const name = document.getElementById('name')
    const surname = document.getElementById('surname')

    const data = {
      name: name.value,
      surname: surname.value
    }
    this.presenter.save(data)
  }
  
  set message(_message_) {
  	const message = document.getElementById('message')
    message.innerHTML = _message_
  }
  
  set name(_name_) {
  	const name = document.getElementById('name')
    name.value = _name_
  }
  
  set surname(_surname_) {
  	const surname = document.getElementById('surname')
    surname.value = _surname_
  }
}

class Presenter {
  initialize(model, view) {
    this.model = model
    this.view = view
    this.view.name = this.model.name
    this.view.surname = this.model.surname
  }

  save(data) {
    this.model.name = data.name
    this.model.surname = data.surname
    this.view.message = `Saved! ${JSON.stringify(this.model)}`
  }
}

var model = new Model('Jan', 'Kowalski')
var presenter = new Presenter()
var view = new View(presenter)

presenter.initialize(model, view)