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 に答える