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

Question

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

有时过滤会变得非常复杂并需要一段时间，所以我想显示一个进度图像以表明某些事情正在发生，世界还没有结束。

执行此操作的最佳方法是什么？我试过在过滤方法的开始和结束时设置的 View 模型上使用可观察对象，但这似乎不起作用。

或者是否有您可以在 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);
    });

这是工作 fiddle :http://jsfiddle.net/pSzSw/6/