Question

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

我也在使用淘汰赛。

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

我希望做的只是渲染列表的前20个，当弹出第1个项目时，列表中的下一个项目会显示出来。如果用户过滤列表，那么只会显示最多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/

knockout js显示可观察数组的子集

1 个答案: