Question

我的模型中有一系列文章，它们很好地呈现为HTML。我想要的是在用户滚动到页面末尾时添加一些新文章。我实现了这一点，但在我看来有一些非常hacky行为：我所做的就是添加jquery事件处理程序$(window).scroll，如下所示：

function ArticlesViewModel() {
    var self                = this;
    this.listOfReports      = ko.observableArray([]);

    this.loadReports = function() {
        $.get('/router.php', {type: 'getReports'}, function(data){
            self.listOfReports(self.listOfReports().concat(data));
        }, 'json');
    };

    this.loadReports();

    $(window).scroll(function() {
        if($(window).scrollTop() == $(document).height() - $(window).height()) {
            self.loadReports();
        }
    })
};

在我的简单原型场景中它很好用，但我认为即使我隐藏我的模型也会调用此滚动。

那么有更合适的方法来做同样的行为吗？

Answer 1

因为没有人回答我的问题，但是Jeroen给了我一个暗示在哪里看，我会尝试用我发现的问题回答我的问题。所以：

1）你必须使用滚动事件

查看

<div id="main" data-bind="foreach: items, event: { scroll: scrolled }"> <div data-bind="text: name"></div> </div>

<强>视图模型

var viewModel = { items: ko.observableArray([]), scrolled: function(data, event) { var elem = event.target; if (elem.scrollTop > (elem.scrollHeight - elem.offsetHeight - 200)) { getItems(20); } }, maxId: 0, pendingRequest: ko.observable(false) }; function getItems(cnt) { if (!viewModel.pendingRequest()) { var entries = []; for (var i = 0; i < cnt; i++) { var id = viewModel.maxId++; entries.push({ id: id, name: "Name" + id }); } viewModel.pendingRequest(true); $.ajax({ type: 'POST', url: '/echo/json/', data: {json: ko.toJSON(entries), delay: .1}, success: function(entries) { ko.utils.arrayForEach(entries, function(entry) { viewModel.items.push(entry); }); viewModel.pendingRequest(false); }, error: function() { viewModel.pendingRequest(false); }, dataType: 'json' }); } } ko.applyBindings(viewModel); getItems(20);

取自here和scrollOptions here的类似方法。

还有一个不错的MIT-license implementation here。

Answer 2

没有“正确的方法”，在KnockoutJS中有很多不同的方法可以实现无限滚动，但我建议你使用thinkloop的Knockout JS（KO）无限滚动扩展器，你可以在这里找到：https://github.com/thinkloop/knockout-js-infinite-scroll

在淘汰赛中实现无限滚动的正确方法是什么？

2 个答案: