Question

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

发现了以前问题中的几个解决方案

但我的问题是我只需要向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>

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

Answer 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岁。

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

1 个答案: