Implementing Two Way Bindings

Inspired from EmberJS & BackboneJS, I wanted to implement my own little version

by Unspecified

HTML

<label for="textfield">Name</label>
<input id="textfield" type="text">
<button id="update-button">update textfield</button>
<h5 id="display"></h5>

JavaScript

var display = document.getElementById("display");
var textfield = document.getElementById("textfield");
var button = document.getElementById("update-button");

var pubsub = {
    callbackMap: {},
    subscribe: function (message, callback){
        if(this.callbackMap[message] == null){
            this.callbackMap[message] = [];
        }
        this.callbackMap[message].push(callback);
    },
    publish: function(message, target, value){
        var callbacks = this.callbackMap[message];
        if(callbacks != null){
            callbacks.forEach(function(callback){
                callback(target, value);
            });
        }
    }
};

var holder = {
    set: function(property, value){
        this.property = value;
        pubsub.publish("nameChange", this, value);
    }
};

button.addEventListener("click", function(){
    holder.set("name", "foo");
});

textfield.addEventListener("keyup", function(event){
    pubsub.publish(
        "nameChange", 
        event.currentTarget, 
        event.currentTarget.value);
}, false);

pubsub.subscribe("nameChange", function(target, value){
    display.innerHTML = value;
    if(target == textfield){
        holder.name = value;
    }else{
        textfield.value = value;
    }    
});