Infinite Scroll using KnockoutJS with single AJAX call

Question

When I am working with KnockoutJS I came across a situation where I need to fetch the data from DB using Jquery AJAX. Once I got the response I need to bind the JSON response with the viewmodel part by part instead of binding entire JSON. For this I want go with Jquery infinite scroll feature.

I found couple of solutions from previous Questions posted here without ajax call and with ajax call

But my problem is I need to send only one call to DB and fetch the matched records and bind it to viewmodel part by part instead of pushing the entire response to items array in my viewmodel and binding it.

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

for testing purpose I am using some sample JSON found over the internet but for simplicity purpose I am copying only few records, Ideally my final response may contain more than 2000 records

here is my 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
                ]
            ]
        ]
    }
}

]

So, you want to push the whole response in one time instead of pushing it item by item? — ebram khalil, Nov 26 '13 at 13:04
I don't want to push the entire response to viewmodel before binding the viewmodel to my view, I want push set of records from response let's say if my response is having 1000 records I want to push and bind 100 each time user scrolls to bottom of the page. — user3033807, Nov 26 '13 at 13:47

score 0 · Answer 1 · edited May 23 '17 at 11:49

I never did that before, but if I did, idea would start from the fact you want to show first X items. Let's assume you want to show first 50 items, but as soon as 45th becomes visible, you would want to show first 100. Then you would write something like this:

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

After that, I'd add scroll event listener (http://api.jquery.com/scroll/), run a function to check if element with id = lastVisibleElement() - 5 is visible (Check if element is visible after scrolling) and if it is, increase lastVisibleElement by 50.

Infinite Scroll using KnockoutJS with single AJAX call

1 Answers1