我如何使用 nativescript 按需加载功能

Question

EDIT

i was able to get it to work, but one problem now is, before it creates and additional empty item before showing other items. NB the load on demand function works fine, but i don't know why an additional empty item is created. i guess there's an issue with my code

const viewModel = observableModule.fromObject({
    _sourceDataItems: [],
    dataItems: new ObservableArray(),
    initDataItems: function () {
      var url="https://adekunletestprojects.000webhostapp.com/skog/searchResults.php?search=" + encodeURIComponent("Adeyeye") + "&location=" + encodeURIComponent("Lagos");
      fetch(url).then((response) => response.json()).then((res) => {
        this._sourceDataItems = new ObservableArray(res.items);
        this.dataItems.push(this._sourceDataItems);

      }).catch((err) => {
        var toast = Toast.makeText("Unable to load users");
        toast.show();
      });
    },
    addMoreItemsFromSource: function (chunkSize) {
      console.log(this._sourceDataItems);
      let newItems = this._sourceDataItems.splice(0, chunkSize);
      this.dataItems.push(newItems);
    },

    onLoadMoreItemsRequested: function (args) {
      console.log("---load more item---");
      const that = new WeakRef(this);
      const listView = args.object;
      if (this._sourceDataItems.length > 0) {
        setTimeout(function () {
          that.get().addMoreItemsFromSource(10);
          listView.notifyLoadOnDemandFinished();
        }, 1500);
        args.returnValue = true;
      } else {
        args.returnValue = false;
        listView.notifyLoadOnDemandFinished(true);
      }
    },
});

Answer 1

Search-view-model.js

_sourceDataItems: new ObservableArray(),
    dataItems: new ObservableArray(),
    initDataItems: function () {
      var url = "https://adekunletestprojects.000webhostapp.com/skog/searchResults.php?search=" + encodeURIComponent("Adeyeye") + "&location=" + encodeURIComponent("Lagos");
      fetch(url).then((response) => response.json()).then((res) => {
        this._sourceDataItems = res.items; 
        this.addMoreItemsFromSource(6);
      }).catch((err) => {
        alert(err.message);
      });
    },
    addMoreItemsFromSource: function (chunkSize) {
      console.log(this._sourceDataItems);
      let newItems = this._sourceDataItems.splice(0, chunkSize);
      this.dataItems.push(newItems);
    },

    onLoadMoreItemsRequested: function (args) {
      console.log("---load more item---");
      const that = new WeakRef(this);
      const listView = args.object;
      if (this._sourceDataItems.length > 0) {
        setTimeout(function () {
          that.get().addMoreItemsFromSource(10);
          listView.notifyLoadOnDemandFinished();
        }, 1500);
        args.returnValue = true;
      } else {
        args.returnValue = false;
        listView.notifyLoadOnDemandFinished(true);
      }

    },

Search.js

exports.pageLoaded = function (args) {
  const page = args.object;
  var searchViewModel = new SearchViewModel();
  page.bindingContext = searchViewModel;
  searchViewModel.initDataItems();
  searchViewModel.addMoreItemsFromSource(5);
}