javascript - 等待一个 KO.Observable 被更新

Question

我有许多 ko.observable 和 ko.observableArray 对象——其中一些可能是复杂的/嵌套的，并且在我的一个应用程序的早期定义，但在服务器准备好时被推送的数据异步调用和填充.我的客户端具有从服务器接收此数据的回调方法，然后我在需要时填充各种 KO 对象。 (所有这些数据都是通过信号器推送的)。

我有许多用户输入表单，我需要在呈现表单之前确保数据存在。总的来说，这很安静，因为数据很早就填充了，表单在一段时间后才被访问。

但是，当用户按下 F5 并刷新浏览器时会出现问题。现在必须再次请求后台数据并填充表单下拉列表，但是各种数据项需要一秒钟左右的时间才能由服务器发回。

因此，我需要能够延迟表单的填充，直到所有当前适用的可观察对象都已更新。

我写了一个 Knockout observableArray 的扩展如下:

ko.observableArray.fn.await = function (callback) {

    var items = this();
    var hasValue = false;
    function observe() {
        if (typeof items !== "undefined" && items !== null && typeof items.length !== "undefined") {
            for (var i = 0, len = items.length; i < len; i++) {
                hasValue = (items[i]._destroy !== true);
                if (hasValue) break;
            }
        }
        if (!hasValue) {
            setTimeout(observe, 80);
            return;
        }

        callback();
    }
    observe();
};

一个简单的例子说明如何使用它:

var categories = ko.observableArray([]);

...
OpenFormClicked = function(e) {

    // delay if the data is not yet ready
    categories.await( function() {

         // any code that used category data

         // Now show the popup;
         popup.show();
    });
}

这很好用，我正要写一个类似的 ko.observabley.fn.await，但后来我想到 ko.subscribable.fn 会是一个更好的选择，因为这样我就只有一个扩展名KO 在我的应用程序中。

但是，此时我不确定要检查什么。真的，我只是想知道是否已填充可订阅的内容以及是否以某种方式更新了它的内容，这样它们就不是创建时使用的原始/默认值。

如果我这样定义 KO:

var userTaskData = ko.observable({
    id: ko.observable(),
    tasks: ko.observableArray([])
});

如果 ID、任务或两者都更新了某些内容，我会从等待上述情况发出回调...

Answer 1

最后我用两个包装类解决了这个问题；一个用于 ko,observable，另一个用于 ko.observableArray 和 JQuery promise，我还编写了一个实用函数以允许等待多个延迟的 KO...

ko.deferredObservable = function (initValue) {
    var result = ko.observable(initValue);
    var dfd = new jQuery.Deferred();
    var promise = dfd.promise();
    result.subscribe(function (value) {
        dfd.resolve();
    });
    result.await = function (callback) {
        promise.then(callback);
    };
    result._promise = promise;
    return result;
};

ko.deferredObservableArray = function (initValue) {
    var result = ko.observableArray(initValue);
    var dfd = new jQuery.Deferred();
    var promise = dfd.promise();
    result.subscribe(function (value) {
        dfd.resolve();
    });
    result.await = function (callback) {
        promise.then(callback);
    };
    result._promise = promise;
    return result;
};

// Utility Extension for awaiting a defined KO or Array of KO's
ko.utils.await = function (arr, callback) {
    var promisesArray = ([].concat(arr)).map(function(item) { return item._promise; });
    var deff = $.when.apply($, promisesArray);
    deff.then(callback);
};