延迟异步计算可观察

霍罗迪斯基

我一直在疯狂试图解决这一问题。我已经看到了很多混淆和难以实现的示例,这些示例在异步调用完成后在Knockout中填充可计算的可观察对象,但是我似乎无法使用模块公开模式使其工作。

我正在尝试创建一个只读的observable,因为这就是我所需要的。如果我不需要运行匿名函数来发出请求,我什至无法观察。这是我的视图模型:

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个小时动脑筋...如果有人可以引导我朝正确的方向前进,将不胜感激。

使用淘汰赛3.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);
        });
    });

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

可观察/对象延迟/油门问题(ngIf和异步)

来自分类Dev

异步可观察内部

来自分类Dev

从可观察数组计算可观察数组

来自分类Dev

Angular Rxjs:使用异步管道连续延迟地发出所有合并的可观察对象

来自分类Dev

在可观察项RxJava之间添加延迟

来自分类Dev

异步方法中的可观察集合

来自分类Dev

异步发布到可观察/主题

来自分类Dev

最初如何异步加载可观察数组

来自分类Dev

角度 2 异步可观察 @Input

来自分类Dev

获取计算的可观察依赖关系

来自分类Dev

可观察和计算无法正常工作

来自分类Dev

敲除计算的可观察写入不更新

来自分类Dev

根据另一个可观察值的值延迟发射可观察值

来自分类Dev

使用RxJS延迟可观察变量的批处理

来自分类Dev

多个顺序的可观察对象,它们之间有适时的延迟

来自分类Dev

缓存和延迟数据检索的可观察模式

来自分类Dev

带有可观察到的可观察数据的计算会浪费计算时间

来自分类Dev

如果更改可观察对象,异步管道是否会自动取消订阅可观察对象?

来自分类Dev

KnockoutJS强制计算的可观察值重新计算

来自分类Dev

RxJS-如何对异步可观察对象数组使用toArray()?

来自分类Dev

可观察的。带有异步谓词的地方

来自分类Dev

订阅具有异步功能的可观察序列

来自分类Dev

Angular 2-可观察和异步HTTP加载

来自分类Dev

异步管道无法呈现可观察到的

来自分类Dev

试图找出异步返回可观察到的问题

来自分类Dev

在角度7可观察的异步管道上需要帮助

来自分类Dev

异步加载存储在SwiftUI中可观察对象中的UIImage

来自分类Dev

Angular 2-可观察和异步HTTP加载

来自分类Dev

角度可观察的Angular2异步管道

Related 相关文章

热门标签

归档