在Knockout计算函数运行时显示加载div

Question

在po计算函数运行时，只是试图弄清楚如何显示加载div这个有点新东西。我不太确定我需要什么，也许我需要使用击倒扩展器？

这里的任何地方都是小提琴。

http://jsfiddle.net/zf5k9rxq/10/

HTML

<div id="green">
	<div id="blue"></div>
</div>

的Javascript

<input data-bind="value: val" />
<p><span data-bind="text: comp"></span>
</p>
<div data-bind="if: showloading">Loading...</div>

Answer 1

我不确定为什么你需要Show/Hide div in computed可能是我认为ajax调用的模拟。

你可以通过这样的方式实现它。检查以下代码中的注释行，看看我做了哪些细微更改。

查看：

<input data-bind="value: val" />
<p><span data-bind="text: compute,visible:!showloading()"></span></p> /*Toggling span visibility if loader is running*/
<div data-bind="if: showloading">Loading...</div>

<强>视图模型：

function model() {
    var self = this;
    self.val = ko.observable("hello");
    self.showloading = ko.observable(true);
    self.compute = ko.observable();

    ko.computed(function () {
        var val = self.val(); //Creating a subscription 
        //show loading
        self.showloading(true);
        setTimeout(function () { //Delaying execution to show Loader
            self.showloading(false);
            self.compute(val ? val.toUpperCase() : val) //Assigning value to observable inside computed .
        }, 3000)
    });
}

$(document).ready(function () {
    ko.applyBindings(new model());
});

PS：如果你想避免计算，你也可以使用订阅。

工作样本 here