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

【问题标题】：How do i use nativescript load on demand funtion我如何使用 nativescript 按需加载功能
【发布时间】：2020-05-06 00:44:38
【问题描述】：

编辑

我能够让它工作，但现在的一个问题是，在它创建和显示其他项目之前添加额外的空项目。注意按需加载功能工作正常，但我不知道为什么会创建一个额外的空项目。我想我的代码有问题

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);
      }
    },
});

【问题讨论】：

你的dataItems 应该是一个 ObservableArray，你应该将新项目推送到数组中，重新分配它将重新加载整个列表。
@Manoj 谢谢！，我已经更新了这个问题。请检查它
请分享 Playground 示例。
@Manoj playground 谢谢
这是因为 this.dataItems.push(this._sourceDataItems); 您正在使用整个 ObservableArray 到其中。我什至不确定你为什么要那样做。我强烈建议您在使用方法之前先阅读文档。

标签： javascript nativescript

【解决方案1】：

搜索视图模型.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);
      }

    },

搜索.js

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

【讨论】：