使用 KnockoutJS 和单个 AJAX 调用的无限滚动答案

【问题标题】：Infinite Scroll using KnockoutJS with single AJAX call使用 KnockoutJS 和单个 AJAX 调用的无限滚动
【发布时间】：2013-12-11 14:18:31
【问题描述】：

当我使用 KnockoutJS 时，我遇到了一种情况，我需要使用 Jquery AJAX 从数据库中获取数据。一旦我得到响应，我需要将 JSON 响应与视图模型部分绑定，而不是绑定整个 JSON。为此，我想使用 Jquery 无限滚动功能。

我从之前发布的问题中找到了几个解决方案 without ajax call 和 with ajax call

但我的问题是我只需要向 DB 发送一个调用并获取匹配的记录并将其逐部分绑定到 viewmodel，而不是将整个响应推送到我的 viewmodel 中的 items 数组并绑定它。

<div id="main" data-bind="foreach: items">
    <div data-bind="text: properties.MAPBLKLOT"></div>
</div>

<script>
var viewModel = {
    items: ko.observableArray([])
};

var url = 'testdata.json';
$.getJSON(url).done(function (items) {
    ko.utils.arrayForEach(items, function(item) {
        viewModel.items.push(item);
    });
});

ko.applyBindings(viewModel);
</script>

出于测试目的，我使用了一些通过 Internet 找到的示例 JSON，但为了简单起见，我只复制了几条记录，理想情况下，我的最终响应可能包含超过 2000 条记录

这是我的 testdata.json

[
{
    "type": "Feature",
    "properties": {
        "MAPBLKLOT": "2318026",
        "BLKLOT": "2318026",
        "BLOCK_NUM": "2318",
        "LOT_NUM": "026",
        "FROM_ST": "2048",
        "TO_ST": "2048",
        "STREET": "SANTIAGO",
        "ST_TYPE": "ST",
        "ODD_EVEN": "E"
    },
    "geometry": {
        "type": "Polygon",
        "coordinates": [
            [
                [
                    -122.489637118874,
                    37.7444192929202,
                    0
                ],
                [
                    -122.489651451294,
                    37.7446249545443,
                    0
                ],
                [
                    -122.48954916239,
                    37.74462945745,
                    0
                ],
                [
                    -122.489534792816,
                    37.7444237964457,
                    0
                ],
                [
                    -122.489637118874,
                    37.7444192929202,
                    0
                ]
            ]
        ]
    }
},
{
    "type": "Feature",
    "properties": {
        "MAPBLKLOT": "2318027",
        "BLKLOT": "2318027",
        "BLOCK_NUM": "2318",
        "LOT_NUM": "027",
        "FROM_ST": "2282",
        "TO_ST": "2282",
        "STREET": "32ND",
        "ST_TYPE": "AVE",
        "ODD_EVEN": "E"
    },
    "geometry": {
        "type": "Polygon",
        "coordinates": [
            [
                [
                    -122.489449018252,
                    37.7446338654758,
                    0
                ],
                [
                    -122.48954916239,
                    37.74462945745,
                    0
                ],
                [
                    -122.489651451294,
                    37.7446249545443,
                    0
                ],
                [
                    -122.489656228785,
                    37.7446935084171,
                    0
                ],
                [
                    -122.489353664903,
                    37.7447068261707,
                    0
                ],
                [
                    -122.489348875236,
                    37.7446382733974,
                    0
                ],
                [
                    -122.489449018252,
                    37.7446338654758,
                    0
                ]
            ]
        ]
    }
},
{
    "type": "Feature",
    "properties": {
        "MAPBLKLOT": "2318028",
        "BLKLOT": "2318028",
        "BLOCK_NUM": "2318",
        "LOT_NUM": "028",
        "FROM_ST": "2278",
        "TO_ST": "2278",
        "STREET": "32ND",
        "ST_TYPE": "AVE",
        "ODD_EVEN": "E"
    },
    "geometry": {
        "type": "Polygon",
        "coordinates": [
            [
                [
                    -122.489253520649,
                    37.7447112340303,
                    0
                ],
                [
                    -122.489353664903,
                    37.7447068261707,
                    0
                ],
                [
                    -122.489656228785,
                    37.7446935084171,
                    0
                ],
                [
                    -122.489661007419,
                    37.7447620622697,
                    0
                ],
                [
                    -122.48924661819,
                    37.7447803023226,
                    0
                ],
                [
                    -122.489241841072,
                    37.7447117484342,
                    0
                ],
                [
                    -122.489253520649,
                    37.7447112340303,
                    0
                ]
            ]
        ]
    }
},
{
    "type": "Feature",
    "properties": {
        "MAPBLKLOT": "2318028A",
        "BLKLOT": "2318028A",
        "BLOCK_NUM": "2318",
        "LOT_NUM": "028A",
        "FROM_ST": "2274",
        "TO_ST": "2274",
        "STREET": "32ND",
        "ST_TYPE": "AVE",
        "ODD_EVEN": "E"
    },
    "geometry": {
        "type": "Polygon",
        "coordinates": [
            [
                [
                    -122.489661007419,
                    37.7447620622697,
                    0
                ],
                [
                    -122.489665784928,
                    37.7448306161404,
                    0
                ],
                [
                    -122.489251395318,
                    37.7448488562099,
                    0
                ],
                [
                    -122.48924661819,
                    37.7447803023226,
                    0
                ],
                [
                    -122.489661007419,
                    37.7447620622697,
                    0
                ]
            ]
        ]
    }
}

]

【问题讨论】：

您能更具体地谈谈您的问题吗？
那么，您想一次性推送整个响应而不是逐项推送？
我不想在将视图模型绑定到我的视图之前将整个响应推送到视图模型，我想从响应中推送一组记录假设我的响应有 1000 条我想要推送的记录并且每次用户滚动到页面底部时绑定 100。

标签： javascript jquery ajax json knockout.js

【解决方案1】：

我以前从未这样做过，但如果我这样做了，想法将从您想要显示前 X 个项目的事实开始。假设您要显示前 50 个项目，但是一旦第 45 个可见，您就希望显示前 100 个。然后您将编写如下内容：

<!-- ko foreach: allElement -->
<!-- ko if: $index() < $root.lastVisibleElement() -->
... row by row here ... IMPORTANT (one element in row must have following) -> data-bind="attr:{id: $index()}"
<!-- /ko -->
<!-- /ko -->

之后，我将添加滚动事件侦听器 (http://api.jquery.com/scroll/)，运行一个函数来检查带有 id = lastVisibleElement() - 5 的元素是否可见 (Check if element is visible after scrolling)，如果是，则将 lastVisibleElement 增加 50。

【讨论】：