Knockout：在等待查询完成时加载页面

Question

总结：我有一个 observable 控制加载页面元素，该元素在长时间运行ning 查询期间隐藏所有内容。即使在查询之前更改了 observable，加载页面也不会显示。放置占位符 setTimeout 有效，但页面似乎在等待查询运行更新页面。

编辑 3：我应该提到我在 Node.js 中这样做。

Edit2：我想要发生的事情：

1) 用户点击按钮。
2) 加载屏幕覆盖 table.
3) 计算运行
4) 加载屏幕消失，table 填充结果

当前发生的事情：
1) 用户点击按钮。
2) 屏幕在计算时冻结 3-4 秒运行.
3) Table 填充了结果

说明我们的页面上有几个很长的运行ning 查询（大约需要 3-4 秒），我们想放置一个加载屏幕以隐藏控件并通知人们该页面是运行ning.

这是我写的扩展器（在互联网的一些帮助下）：

ko.bindingHandlers.Loading = {
init: function (element) {
    $(element).append("<div id='loading_wrap' class='loader' style='height:100%; width:100%;text-align:center; margin-top: 20%'><img src='./resources/ajax-loader.gif'><br>Loading, please wait.</div>")
},
update: function (element, valueAccessor) {
    var isLoading = ko.utils.unwrapObservable(valueAccessor());
    var $element = $(element);
    var $children = $element.children(':not(.loader)');
    var $loader = $(element).find('.loader');

    if (isLoading) {
        $children.hide();
        $loader.show();
    } else {
        $children.show();
        $loader.hide();

    }
}

我将 bindingHandler 附加到 div，其中包含我想隐藏的结果：

<div class="row table__row" data-bind="Loading:isLoading">

我在运行查询之前设置了 this.isLoading(true)，然后在查询之后将其设置回 false。以下内容不起作用：

this.load =  _ => {
        var _self = this
        this.isLoading(true)
        this.search()
        this.isLoading(false)
    }

但是，如果我设置超时，加载页面会正常显示。

this.load = _ => {
        var _self = this
        this.isLoading(true)
        setTimeout(function () {
            _self.isLoading(false);
        }, 3000)
    }

我也尝试过几种异步方法，但我对此不是很了解。那么，如何让加载页面出现在查询运行s 之前，然后在查询完成后消失呢？谢谢。

编辑：收到一些对我们的搜索功能的请求。它看起来像这样（我们没有使用 Ajax）

this.search = async _ => {
//bunch of filters/calculations on large arrays
this.results(the results of our large calculations)
}

Answer 1

使用绑定处理程序并不是绝对必要的，因为您只能在一个方向上执行操作。

保持简单：

this.isLoading.subscribe(function(value) {
  ... get elements
  $children.toggle(!value);
  $loader.show(value);
});

在你发表评论之后，我相信你需要的只是稍微 post 完成你漫长的运行工作，在显示加载微调器之后，类似这样的事情：

    this.isLoading(true);
    setTimeout(function () {
        this.search();
        this.isLoading(false);
    }, 100);

关于 promises 和异步代码之间的区别，post 有一个很好的例子：

顺便说一句，这里是 extenders and here for binding handlers.

的 Knockout 参考资料

Knockout：在等待查询完成时加载页面

Knockout: Loading Page While Waiting for a Query to Finish

javascript

asynchronous

loading

node.js

knockout.js