Return to Revisions

1 of 4

asked Mar 3, 2014 at 0:43

Is it a classical MVC (Xerox Parc) implementation?

I've been trying to understand the original MVC implementation (the Xerox Parc's one: http://heim.ifi.uio.no/~trygver/2003/javazone-jaoo/MVC_pattern.pdf). I'm sure it has flaws, but it's a simple code to practice/learn the original MVC.

Working example: http://jsfiddle.net/2D4ST/

View (index.html):

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Person</title>
    </head>
    <body>
        <h1 id="person-name" contenteditable="true"></h1>
        <p>Birth Date: <span id="person-birth-date" contenteditable="true"></span></p>
        <p>Age: <span id="person-age"></span></p>
        <code id="json-model-representation"></code>
        <script src="model-person.js"></script>
        <script src="controller-person.js"></script>
        <script src="main.js"></script>
    </body>
</html>

Model (model-person.js):

var ModelPerson = (function () {
    'use strict';

    var ModelPerson = function (name, birthDate) {
        this.name = name;
        this.birthDate = birthDate;
    };

    ModelPerson.prototype.getName = function () {
        return this.name;
    };

    ModelPerson.prototype.setName = function (name) {
        this.name = name;
    };

    ModelPerson.prototype.getBirthDate = function () {
        return this.birthDate;
    };

    ModelPerson.prototype.setBirthDate = function (birthDate) {
        this.birthDate = birthDate;
    };

    ModelPerson.prototype.getAge = function () {
        var dateDifference = new Date(Date.now() - this.birthDate.getTime());
        return Math.abs(dateDifference.getFullYear() - 1970);
    };

    return ModelPerson;
}());

Controller (controller-person.js):

var ControllerPerson = (function () {
    'use strict';
    var controller;

    var ControllerPerson = function (modelPerson) {
        controller = this;
        controller.modelPerson = modelPerson;
    };

    ControllerPerson.prototype.initialize = function () {
        document.getElementById('person-name').addEventListener('blur', function () {
            controller.modelPerson.setName(this.textContent);
            controller.updateView();
        });

        document.getElementById('person-birth-date').addEventListener('blur', function () {
            controller.modelPerson.setBirthDate(new Date(this.textContent));
            controller.updateView();
        });

        controller.updateView();
    };

    ControllerPerson.prototype.updateView = function () {
        document.getElementById('person-name').textContent = this.modelPerson.getName();
        document.getElementById('person-birth-date').textContent = this.modelPerson.getBirthDate();
        document.getElementById('person-age').textContent = this.modelPerson.getAge();
        document.getElementById('json-model-representation').textContent = JSON.stringify(controller.modelPerson);
    };

    return ControllerPerson;
}());

Instantiation (main.js):

(function () {
    'use strict';
    var modelPerson = new ModelPerson('John Doe', new Date('1987-09-11')),
        controllerPerson = new ControllerPerson(modelPerson);

    controllerPerson.initialize(); }());

My model is the mental object model. My controller handles events and update the Model. The view is "dumb" and just presents the content ...

Do you think it's like the original MVC? What's wrong? What am I missing?

Thanks!

asked Mar 3, 2014 at 0:43

Thom Thom Thom