simple observer

by Artem Baguinski

HTML

<h3 id="aantal">Aantal: 
    <span class="num">AANTAL</span> 
    <div class="block"></div> 
</h3>

<button onclick="aantalCtrl.setNumber( Math.random() )">
    verander
</button>

<h3 id="budget">Budget: 
    <span class="num">BUDGET </span>
    <div class="block"></div>
</h3>

<button onclick="budgetCtrl.setNumber( Math.random() )">
    verander
</button>

CSS

.block {
    background: red; 
    height: 3px;
}

JavaScript

function NumberController(startWaarde) {
    this.number = startWaarde;
    this.observers = [];
}

NumberController.prototype.sub = function(observer) {
    this.observers.push(observer);
    observer.notify(this.number);
};

NumberController.prototype.pub = function () {
    this.observers.forEach(function(observer) {
        observer.notify(this.number);
    }, this);
};

NumberController.prototype.setNumber = function (waarde) {
    this.number = waarde;
    this.pub();
};

// een observable
function NumberView(selector) {
    this.el = $(selector);
}

NumberView.prototype.notify = function(number) {
    this.el.text(number);
};

// nog een!
function BlockView(selector) {
    this.el = $(selector);
}

BlockView.prototype.notify = function(number) {
    this.el.width(number*200);
    console.log(this.el);
};

// subjecten
aantalCtrl = new NumberController(0.42);
budgetCtrl = new NumberController(0.10);

// observers
var aantalView = new NumberView("#aantal .num");
var aantalBlock = new BlockView("#aantal .block");
var budgetView = new NumberView("#budget .num");
var budgetBlock = new BlockView("#budget .block");

// subscriptie
aantalCtrl.sub(aantalView);
aantalCtrl.sub(aantalBlock);
budgetCtrl.sub(budgetView);
budgetCtrl.sub(budgetBlock);