3

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

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

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

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

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

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

4

1 回答 1

3

要完成这项工作，您必须在另一个线程中运行长时间操作。您可以使用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/

于 2012-12-21T17:07:38.547 回答