0

我有一个包含 600 个项目（它们是任务提醒）的视图模型，在名为 workQueue 的 observableArray 中按从旧到新排序，我将其显示为 ul > li。这可能需要一些时间来渲染。

我也在使用淘汰赛排序。

<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 回答