Knockout - 在渲染过程中显示进度图像

Question

我有一个使用 Knockout 来显示过滤列表的页面。视图模型有一个对象数组，以及一个使用ko.utils.arrayFilter 过滤数组的ko.computed。

过滤有时会变得相当复杂并且需要一段时间，所以我想显示一个进度图像来显示正在发生的事情并且世界还没有结束。

最好的方法是什么？我尝试在视图模型上使用可观察对象，该对象在过滤方法的开始和结束处设置，但这似乎不起作用。

或者在 Knockout 开始更新之前和之后您可以使用哪些事件？

我是 Knockout 的新手，所以我可能错过了一些明显的东西！

这里的 JS Fiddle：http://jsfiddle.net/jsayce/pSzSw/，展示了我在过滤方法上设置可观察对象的尝试。

Answer 1

要完成这项工作，您必须在另一个线程中运行长时间操作。您可以使用setTimeout 函数或使用任何精美的第三方库来执行此操作。这是快速解决方案：

var cheeseViewModel = function() {
    var self = this;

    self.englishOnly = ko.observable(false);
    self.filtering = ko.observable(false);

    self.cheeses = ko.observableArray([]);
    self.cheeses.push(new cheese('Camembert', false));
    self.cheeses.push(new cheese('Stilton', true));
    self.cheeses.push(new cheese('Brie', false));
    self.cheeses.push(new cheese('Appenzeller', false));
    self.cheeses.push(new cheese('Wensleydale', true));

    self.selectedCheeses = ko.observableArray(self.cheeses());

    self.englishOnly.subscribe(function() {
        self.filtering(true);

        setTimeout(function() {
            var filteredCheeses = ko.utils.arrayFilter(self.cheeses(), function(cheese) {
                createSlowness();
                return cheese.madeInEngland || !self.englishOnly();
            });

            self.selectedCheeses(filteredCheeses);
            self.filtering(false);
        }, 20);
    });

这是工作小提琴：http://jsfiddle.net/pSzSw/6/