0

ul> liとして表示するworkQueueというobservableArrayに、600個のアイテム（タスクリマインダー）が古いものから新しいものの順に並べ替えられたビューモデルがあります。これは、レンダリングに時間がかかる場合があります。

私もノックアウトソート可能を使用しています。

<ul class="drop-target" data-bind="sortable: workQueue">
    <li data-bind="text: title"></li>
</ul>

私がやりたかったのは、リストのトップ20のみをレンダリングすることでした。最初のアイテムがポップされると、リストの次のアイテムが表示されます。ユーザーがリストをフィルタリングすると、最大20個しか表示されません。

並べ替え可能な方法はありますか。特定のカウントに達したときにレンダリングを終了する方法はありますか。

4

1 に答える 1

2

いいえ、コードを調整せずに特定の量に達したときにレンダリングを停止する方法はありませんが、次のように指定したページサイズをシミュレートするために計算プロパティを使用することを検討することをお勧めします。

var ViewModel = function () {
    var self = this;
    var work = new Array(600);
    for (var i = 0; i < work.length; i++) {
        work[i] = {
            name: i.toString()
        };
    }
    self.startPos = ko.observable(0);
    self.pageSize = ko.observable(20);
    self.workQueue = new ko.observableArray(work);
    self.workQueue.paged = ko.computed(function () {
        var start = self.startPos();
        var end = self.workQueue().length;
        end = Math.min(end, start + self.pageSize());
        return self.workQueue().slice(start, end);
    });
};

var vm = new ViewModel();
ko.applyBindings(vm);

loop();

function loop() {
    if (vm.startPos() + vm.pageSize() < vm.workQueue().length)  {
        vm.startPos(vm.startPos() + 1);
        window.setTimeout(loop, 10);
    }

}

元の配列の代わりにバインドする元の配列のセカンダリスライスを作成するだけです。

ただし、リストの一部しか表示されない場合、並べ替えの動作はおかしいでしょうか。

http://jsfiddle.net/Dzpkx/1/

于 2013-02-06T01:31:05.183 に答える