延迟异步计算可观测性

Question

我一直在疯狂地想办法解决这件事。当异步调用完成时，我已经看到了许多模糊和难以实现的示例，这些例子都是在Knockout中可观察到的，但我似乎无法使用模块显示模式使其工作。

我试着创建一个只读的可观察的，因为这就是我所需要的。如果我不需要一个匿名函数来运行请求，我甚至都不会让人注意到这一点。以下是我的看法--模特：

eh.vm.skills = function () {

    //#region Public Variables

    var skills = ko.computed({
            read: function () {
                $.get("http://horodyski.me/api/skills", function (data) {
                    return data;
                });
            },
            deferEvaluation: true
        }),
    //#endregion


    //#region Public Interface

    return {
        skills: skills
    }

    //#endregion
};

这是HTML绑定：

<ul class="skills skills-top" id="skills" data-bind="foreach: skills">
    <li>
        <i data-bind="text: $index"> </i>
        <span data-bind="text: $data.Title"></span>
    </li>
</ul>
<script src="//cdn.horodyski.me/js/vm.js"></script>
<script>
    ko.applyBindings(eh.vm.skills, $("#skills")[0]);
</script>

我想做的是创建skills变量，获取数据并返回数据。数据已经返回到数组中(例如：[{Title: "ABC"}])，但它似乎没有绑定。我试着使用$.when().then() (正如我喜欢的那样)，但是即使计算值被推迟，它仍然不会更新。

对我来说，真正复杂的部分是可变范围。当涉及到范围时，模块显示模式很糟糕。我已经绞尽脑汁了3 hours...if，任何人都可以引导我朝着正确的方向前进，我将不胜感激。

使用Knockout 3.1编辑(如果有帮助的话)

Answer 1

您的read回调完全错误。

回调：

function (data) {
    return data;
}

是死代码，它将数据返回给调用此回调的jQuery函数，该函数将不会对其进行任何操作。

您需要返回延迟本身：

read: function () {
    return $.get("http://horodyski.me/api/skills");
}

这里还需要异步扩展程序：http://smellegantcode.wordpress.com/2012/12/10/asynchronous-computed-observables-in-knockout-js/

ko.extenders.async = function(computedDeferred, initialValue) {
    var plainObservable = ko.observable(initialValue), currentDeferred;
    plainObservable.inProgress = ko.observable(false);

    ko.computed(function() {
        if (currentDeferred) {
            currentDeferred.reject();
            currentDeferred = null;
        }

        var newDeferred = computedDeferred();
        if (newDeferred && (typeof newDeferred.done == "function")) {
            plainObservable.inProgress(true);
            currentDeferred = $.Deferred().done(function(data) {
                plainObservable.inProgress(false);
                plainObservable(data);
            });
            newDeferred.done(currentDeferred.resolve);
        } else {
            plainObservable(newDeferred);
        }
    });

    return plainObservable;
};

用于：

var skills = ko.computed(...).extend({ async: null });

如果您想在JSON传递到您的视图之前连接到它：

var skillsJson = ko.computed(...).extend({ async: null });
var skills = ko.computed(function () {
    return transformData(skillsJson());
};

或者：

var skills = ko.computed(function () {
        return $.get("url").then(function (data) {
            return transform(data);
        });
    });