list-view-model.ts

export class ListExpenseModel extends Observable {
    public expenses: ObservableArray<Expense>;

    constructor() {
        super();
        this.expenses = new ObservableArray([]);
        this.dummyExpenses()

    }

    private dummyExpenses(): void {
        for (let i of u.range(1, 2)) {
            this.addToObservableArray(i)
        }
    }


    private addToObservableArray(id: number) {
        if (id > 55) {
            return;
        }

        let allIds: number[] = this.expenses.map(el => el.id);

        if (allIds.indexOf(id) !== -1) {
            console.error(`Trying to add id:${id} again`);
            return;
        }
        let exp = new Expense(<IExpense> {
            amount: u.sample(u.range(100)),
            name: `id: ${id}`,
            id: id,
            timestamp_utc: currentTime(),
        });


        this.expenses.push(u.clone(exp))
    }

    public loadMoreItems(ev) {
        console.log('loading more items');

        if (!this.expenses.length) {
            return;
        }

        let oldestID = Math.max(...this.expenses.map(el => el.id));

        if (oldestID !== this.expenses.getItem(this.expenses.length - 1).id) {
            console.error("Last item doesn't have the highest id.")
        }
        // add ten more items
        for (let i of u.range(oldestID + 1, oldestID + 10)) {
            this.addToObservableArray(i)
        }
    }
}

list.ts

import {EventData} from "tns-core-modules/data/observable";
import {ItemEventData, ListView} from "tns-core-modules/ui/list-view";
import {Page} from "tns-core-modules/ui/page";

import {ListExpenseModel} from "./list-view-model";
import {navigateTo} from "~/utils/nav"
import {IExpense} from "../../models/expense";

let listModel = new ListExpenseModel();
let page: Page;

export function navigatingTo(args: EventData) {
    page = <Page>args.object;
    page.bindingContext = listModel;
}

export function loadMoreItems(ev: EventData): void {
    listModel.loadMoreItems(ev);
    let l: ListExpenseModel = <ListExpenseModel> ev.object;
    let view: ListView = <ListView> page.getViewById('expenses-list')
}


export function onTap(ev: ItemEventData): void {
    let itemIndex: number = ev.index;
    let expense: IExpense = listModel.expenses.getItem(itemIndex);
    console.log(`onTap: {'id': ${expense.id}, 'amount': ${expense.amount}}`)

}

list.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page" actionBarHidden="true">
        <StackLayout>
            <ListView items="{{ expenses }}" id="expenses-list" loadMoreItems="loadMoreItems" itemTap="onTap">
                <ListView.itemTemplate>
                    <DockLayout stretchLastChild="false" class='expense' height="200">
    
                        <StackLayout dock='left'>
    
                            <Label text='{{name}}' class='expense-name'/>
                            <Label text="{{readable_timestamp}}"/>
                        </StackLayout>
    
                        <Label dock='right' class='expense-amount' text='{{amount}}' style.verticalAlignment="center"/>
    
                    </DockLayout>
                </ListView.itemTemplate>
            </ListView>
        </StackLayout>
    </Page>