MVC

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(model, controller) {
    var self = this
    var name = document.getElementById('name')
    var surname = document.getElementById('surname')
    var save = document.getElementById('save')

    name.value = model.name
    surname.value = model.surname

    save.onclick = function() {
      var data = {
        name: document.getElementById('name').value,
        surname: document.getElementById('surname').value
      }
      controller.save(data)
    }.bind(this)
  }

  set message(message) {
    var elMessage = document.getElementById('message')
    elMessage.innerHTML = message
  }
}

class Controller {
  initialize(model, view) {
    this.model = model
    this.view = view
  }

  save(data) {
    this.model.name = data.name
    this.model.surname = data.surname
    this.view.message = 'Saved!'
  }
}

var model = new Model('Foo', 'Bar')
var controller = new Controller()
var view = new View(model, controller)

controller.initialize(model, view)