使用KnockoutJS和单个AJAX调用进行无限滚动

Infinite Scroll using KnockoutJS with single AJAX call

本文关键字：无限 滚动 调用 AJAX KnockoutJS 单个 使用      更新时间：2023-11-08

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

我在之前的问题中找到了几个解决方案，没有ajax调用，也有ajax调用

但我的问题是，我只需要向DB发送一个调用，然后获取匹配的记录，并将其逐部分绑定到视图模型，而不是将整个响应推送到我的视图模型中的项目数组并将其绑定

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

出于测试目的，我使用了一些在互联网上找到的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
                ]
            ]
        ]
    }
}

]

我以前从未这样做过，但如果我这样做了，想法将从您想要显示前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的元素是否可见（检查元素在滚动后是否可见），如果可见，则将lastVisibleElement增加50。

相关文章：