Ожидание обновления KO.Observable

Question

У меня есть несколько объектов ko.observable и ko.observableArray - некоторые из которых могут быть сложными/вложенными и которые определены на ранней стадии в одном из моих приложений, но вызываются и заполняются асинхронно с помощью данных, которые были нажаты, когда они были готовы к серверу. Мой клиент имеет методы обратного вызова, которые получают эти данные с сервера, и затем я заполняю различные объекты KO по мере необходимости. (все эти данные передаются через signalr).

У меня есть несколько форм ввода пользователя, где мне нужно убедиться, что данные присутствуют перед визуализацией формы. В основном это работает спокойно, так как данные заселяются на ранней стадии, а форма доступна через некоторое время.

Однако проблема возникает, когда пользователь нажимает 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(); 
    }); 
} 

Это хорошо работает, и я собирался написать подобный ко. observabley.fn.await, но потом мне пришло в голову, что ko.subscribable.fn будет лучшим выбором, так как тогда у меня будет только одно расширение для всех KO в моем приложении.

Однако на данный момент я не уверен, что проверить. На самом деле я просто хочу знать, была ли заполнена подписка, и ее содержимое было каким-то образом обновлено, так что они не являются исходными/значениями по умолчанию, с которыми он был создан.

Если я устанавливаю KO так:

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

Я хотел бы выпустить обратный вызов от поджидают вышеописанном случае, если либо идентификатор задачи или оба были обновлены с чем-то ...

Answer 1

В конце концов я решил это с помощью двух классов-оболочек; один для ko, наблюдаемый и другой для ko.observableArray и JQuery, и я также написал функцию полезности, чтобы можно было ожидать более одного отложенного 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); 
};