观察用户定义的Javascript对象的属性

Question

我知道通过简单地观察一个对象我们无法观察到对象的属性。但我想知道我的理解是否正确。

我们可以这样做吗？ 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);
});

它没有用，所以我猜不出来。我也不明白这个角色'c'来自哪里。

Answer 1

我刚刚将你的小提琴更新为更常见的KO模式：

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);
});

你在原始小提琴中看到'c'的原因是因为vm.person是一个ko.observable函数，它在最小化时看起来像：

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} 

每个函数都有一个名称属性：

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

所以在这种情况下，vm.person.name是函数vm.person的名称，当缩小为'c'时！

---

编辑：如果你使用一个可观察的人，KO将不知道内部属性会改变，除非你用valueHasMutated调用它来告诉它。下一个演示使用您的VM结构，并通过change事件和valueHasMutated调用将文本框中的更改绑定到范围。所以它有效，但上面的“纯粹”KO方法可能更为简单。

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);
});

...需要这个HTML：

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

Answer 2

你并不遥远，你只需要在你的标记中引用它时展开你的person观察点：

Updated JSFiddle

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

根据评论进行修改

Update JSFiddle

您可以使Person的属性可观察，以便跟踪这样的变化：

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