敲出js显示可观察数组的子集

Question

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

我也在使用knockout-sortable。

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

我希望做的是只渲染列表的前20个项目，当第一个项目弹出时，列表中的下一个项目就会显示出来。如果用户过滤列表，则只会显示最大值20。

在排序中有没有一种方法:当我达到一定的计数时退出渲染。

Answer 1

不，没有一种方法可以在不调整代码的情况下停止渲染，但您可能希望考虑使用计算属性来模拟您指定的页面大小，如下所示：

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/