Observing Properties of a User Defined Javascript Object

Question

I kind of know that we cannot observe properties of an object by simply observing an object. But I want to know if my understanding is correct.

Can we do something like this ? http://jsfiddle.net/Z3gNC/

function Person(name, age) {
    this.name = name;
    this.age = age;
}

$(function () {
    var vm = (function () {
        var person = ko.observable(new Person("ABC", 23));
        return {
            person: person
        };
    })();
    ko.applyBindings(vm);
});

It is not working so we can't I guess. I also don't understand where this character 'c' comes from.

Answer 1

I just updated your fiddle to be the more-usual KO pattern:

http://jsfiddle.net/Z3gNC/1/

function Person(name, age) {
    this.name = ko.observable(name);
    this.age = ko.observable(age);
}

$(function () {
    var vm = (function () {
        var person = new Person("ABC", 23);
        return {
            person: person
        };
    })();
    ko.applyBindings(vm);
});

The reason you see 'c' in your original fiddle is because vm.person is a ko.observable function, which when minimised looks like:

function c(){if(0<arguments.length)return c.Ka(d,arguments[0])&&(c.P(),d=arguments[0],c.O()),this;a.k.zb(c);return d} 

Every function has a name property:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name

so in this case vm.person.name is the name of the function vm.person which when minified is 'c' !

---

Edit: if you use a single observable Person, KO won't know that the inner property changes, unless you tell it with a valueHasMutated call. This next demo uses your VM structure and binds the changes in the textbox to the span, via a change event and a valueHasMutated call. So it works, but the 'pure' KO approach above is perhaps preferable for simplicity.

http://jsfiddle.net/Z3gNC/6/

function Person(name, age) {
    this.name = name;
    this.age = age;
}

$(function () {
    var vm = (function () {
        var person = ko.observable(new Person("ABC", 23));
        var mutate = function(data, event) {
            data.person.valueHasMutated();
        }
        return {
            person: person,
            mutate: mutate
        };
    })();
    ko.applyBindings(vm);
});

... which needs this HTML:

<input data-bind="value:person().name, event: {change: mutate}" />

Answer 2

You're not far off, you just need to unwrap your person observable when referencing it in your markup:

Updated JSFiddle

<input data-bind="value:person().name" />
<input data-bind="value:person().age" />

Edit from comment

Update JSFiddle

You can make the properties of Person observable so that they track changes like so:

function Person(name, age) {
    this.name = ko.observable(name);
    this.age = ko.observable(age);
}