how the nativescript radlist view load on demand works

Question

This might not be the question but it was the list of doubts which comes when learning native script from scratch.

I had a 1000 or more list of data stored in data table. know i want to display it on a list view but i don't want to read all the data at once. because i have images stored in other directory and want to read that also. So, for 20 to 30 data's the performance is quite good. but for 1000 data it is taking more than 15 minutes to read the data as well as images associated with it. since i'm storing some high quality images.

Therefore i decided to read only 20 data's with their respective images. and display it on list. know when user reaches the 15th data of the list. i decided to read 10 more data from the server.

know when i search this i came across "RadListView Load on Demand". then i just looked at the code below.

public addMoreItemsFromSource(chunkSize: number) {
    let newItems = this._sourceDataItems.splice(0, chunkSize);
    this.dataItems.push(newItems);
}

public onLoadMoreItemsRequested(args: LoadOnDemandListViewEventData) {
    const that = new WeakRef(this);
    const listView: RadListView = args.object;
    if (this._sourceDataItems.length > 0) {
        setTimeout(function () {
            that.get().addMoreItemsFromSource(2);
            listView.notifyLoadOnDemandFinished();
        }, 1500);
        args.returnValue = true;
    } else {
        args.returnValue = false;
        listView.notifyLoadOnDemandFinished(true);
    }
}

In nativescript if i want to access binding element xml element. i must use observables in viewmodel or exports.com_name on associated js file.

but in this example it is started with public..! how to use this in javascript.

what is new WeakRef(this) ? why it is needed ?

how to identify user has scrolled to 15 data, as i want to load more data when he came at 15th data.

after getting data how to update array of list and show it in listview ?

Finally i just want to know how to use load on demand

i tried to create a playground sample of what i have tried but it is giving error. it cannot found module of radlistview.

Remember i'm a fresher So, kindly keep this in mind when answering. thank you,

please modify the question if you feel it is not upto standards.

Answer 1

you can check the updated answer here https://play.nativescript.org/?template=play-js&id=1Xireo