JS - Observer pattern

by rajeshpillai

HTML

The first name is <span data-bind="text: firstName"></span> <br/>
The first name is 
<input data-bind="value: firstName" value="rajesh"></input> <br/>

The last name is <span data-bind="text: lastName"></span> <br/>
The last name is 
<input data-bind="value: lastName"></input> <br/>

The family name is <span data-bind="text: familyName"></span> <br/>
The Full name is <span data-bind="text: fullName"></span> <br/>
<br/>
<div data-bind="html: details"></div>

<br/>

JavaScript

// todo:  dependentObservable pending
$(function() {
    var db = new B();
    var user = {
        firstName: db.observable(),
        lastName: db.observable(),
        fullName: function() {
            return this.firstName() + ", " + this.lastName();
        },
        details: "<i>Hello how are you?</i>"
    };

    user.familyName = db.dependentObservable(function() {
        return this.firstName() + " - " + this.lastName();
    }, user, "familyName");

    db.applyBindings(user);
});


var B = function() {
    this.models = [];
    this.observables = {};
    this.dependentObservables = [];

    this.dependentObservable = function(func, viewModel, fieldName) {
        //return func.call(viewModel);
        this.dependentObservables.push(fieldName);

        function dependentObservable() {

            return func.call(viewModel);
        }
        return dependentObservable;
    };

    this.observable = function(value) {

        function observable() {
            var latestValue = value;

            // if its a write
            if (arguments.length > 0) {
                latestValue = arguments[0];
                return this;
            }
            else {
                return latestValue;
            }
        }
        return observable;
    };

    this.bind = function(obj, rootNode) {
        // Bind  all input elements
        //console.log(this.observables);
        $("input").each(function() {
            var $d = $(this).attr("data-bind");
            var kv = $d.split(':');

            var field = $.trim(kv[0]);
            var val = $.trim(kv[1]);

            switch (field) {
            case "value":

                if (typeof obj[val] === 'function') {
                    $(this).val(obj[val]());
                }
                else {
                    if ((typeof obj[val]) === "object") {
                        // this is a observable object.
                        $(this).val(obj[val].observable());

                   ...