Question

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

偶尔过滤会变得非常复杂并需要一段时间，因此我想显示一张进度图像，以显示某些事情正在发生并且世界尚未结束。

最好的方法是什么？我尝试在视图模型上使用一个observable，它在过滤方法的开始和结束时设置，但这似乎不起作用。

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

我是Knockout的新手，所以可能会有一些我错过的明显内容！

JS小提琴：http://jsfiddle.net/jsayce/pSzSw/，显示我尝试在过滤方法上设置一个observable。

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/

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

1 个答案: