觀察用戶定義的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} 

每個函數都有一個name屬性：

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

因此，在這種情況下，vm.person.name是函數vm.person的名稱，在最小化時為'c'！

---

編輯：如果您使用單個可觀察的Person，則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在你的標記引用時，可觀察到：

更新了JSFiddle

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

從評論編輯

更新JSFiddle

您可以使Person的屬性可觀察，以便它們跟蹤更改，如下所示：

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