Knockout.js使每个嵌套对象成为Observable

Question

我使用Knockout.js作为MVVM库将我的数据绑定到某些页面.我目前正在构建一个库来对Web服务进行REST调用.我的RESTful Web服务返回一个简单的结构:

{
    id : 1,
    details: {
        name: "Johnny",
        surname: "Boy"
    }
}

我有一个可观察的主要父母,myObject.当我做

myObject(ko.mapping.fromJS(data))

可观测量myObject是:

• id
• name
• surname

我怎样才能details(理论上结构中的任何对象都是可观察的)？我需要这种行为,这样我就可以在细节上设置一个计算的observable,并在任何内部数据发生变化时立即注意到.

我已经设置了一个基本的递归函数,应该可以解决这个问题.当然,myObject.details它不会成为可观察的.

// Makes every object in the tree an observable.
var makeAllObservables = function () {
    makeChildrenObservables(myObject);
};
var makeChildrenObservables = function (object) {
    // Make the parent an observable if it's not already
    if (!ko.isObservable(object)) {
        if ($.isArray(object))
            object = ko.observableArray(object);
        else
            object = ko.observable(object);
    }
    // Loop through its children
    for (var child in object()) {
        makeChildrenObservables(object()[child]);
    }
};

我很确定它是关于错误引用的东西,但我该如何解决这个问题呢？谢谢.

Answer 1

我会使用淘汰映射插件.

var jsonData = {
    id : 1,
    details: {
        name: "Johnny",
        surname: "Boy"
    }
}

var yourMapping = {
    'details': {
        create: function(options) {
            return Details(options.data);
        }
    }
}

function Details(data) {
    ko.mapping.fromJS(data, {}, this);
}

function YourObjectName() {
    ko.mapping.fromJS(jsonData, yourMapping, this);
}

这将创建您的对象层次结构,其中所有子项都是可观察对象.

Answer 2

我不认为淘汰赛有一种内置的方式来观察子元素的变化.如果我理解了您的问题,当有人更改名称时,您需要将细节更改为要注意的实体.你能给出一个如何使用它的具体例子吗？您是否会使用可观察的详细信息订阅来执行某些操作？

你的代码没有使细节成为可观察对象的原因是因为javascript是按值传递的,所以更改函数中'object'参数的值不会改变你传递的实际值,只改变你内部参数的值功能.

编辑

如果更改将自动传播给父母,这应该让所有孩子都能观察到,但是你第一次传递的根应该已经是一个可观察的.

// object should already be observable
var makeChildrenObservables = function (object) {
    if(!ko.isObservable(object)) return;

    // Loop through its children
    for (var child in object()) {
        if (!ko.isObservable(object()[child])) {
            object()[child] = ko.observable(object()[child]);
        }
        makeChildrenObservables(object()[child]);
    }
};