nativescript radlist 视图按需加载是如何工作的 [英] how the nativescript radlist view load on demand works

问题描述

这可能不是问题，但这是从头开始学习原生脚本时出现的疑问清单.

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

我在数据表中存储了 1000 个或更多的数据列表.知道我想在列表视图中显示它，但我不想一次读取所有数据.因为我有图像存储在其他目录中，并且也想阅读.因此，对于 20 到 30 个数据，性能相当不错.但是对于 1000 个数据，读取数据以及与之相关的图像需要 15 分钟以上的时间.因为我正在存储一些高质量的图像.

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.

因此我决定只读取 20 个数据及其各自的图像.并将其显示在列表中.知道用户何时到达列表的第 15 个数据.我决定从服务器再读取 10 个数据.

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.

知道当我搜索这个时，我遇到了RadListView Load on Demand".然后我只看了下面的代码.

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

在 nativescript 中，如果我想访问绑定元素 xml 元素.我必须在关联的 js 文件上的 viewmodel 或exports.com_name 中使用observables.

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.

但在这个例子中，它以 public..!如何在 javascript 中使用它.

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

什么是新的 WeakRef(this) ?为什么需要它?

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

如何识别用户已滚动到 15 个数据，因为我想在他第 15 个数据时加载更多数据.

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

我试图创建一个我尝试过的游乐场示例，但它给出了错误.找不到radlistview的模块.

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.

推荐答案

TypeScript to JavaScript

您可以使用任何 TypeScript 编译器将源代码转换为 JavaScript.甚至还有在线编译器，例如官方 TypeScript Playground.

You may use any TypeScript compiler to convert the source code to JavaScript. There are even online compilers like the official TypeScript Playground for instance.

在我看来，很难再期待 ES5 示例了.ES6-9 引入了许多新功能，使 JavaScript 开发变得更加容易，TypeScript 将 JavaScript 提升到一个新的水平，从解释器到编译器.

In my opinion, it's hard to expect ES5 examples any more. ES6-9 introduced a lot of new features that makes JavaScript development much more easier and TypeScript takes JavaScript to next level, interpreter to compiler.

为了回答您的问题，您将使用原型链在 ES5 中的类上定义方法.

To answer your question, you will use the prototype chain to define methods on your class in ES5.

YourClass.prototype.addMoreItemsFromSource = function (chunkSize) {
    var newItems = this._sourceDataItems.splice(0, chunkSize);
    this.dataItems.push(newItems);
};

YourClass.prototype.onLoadMoreItemsRequested = (args) {
    var that = new WeakRef(this);
    var listView = 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);
    }
}

如果你在 Observable 中使用 fromObject 语法，那么这些函数可以在内部传递

If you are using fromObject syntax for your Observable, then these functions can be passed inside

addMoreItemsFromSource: function (chunkSize) {
    ....
};

WeakRef:它通过保持对目标的松散引用来帮助有效地管理您的内存，在 文档.

WeakRef: It helps managing your memory effiencetly by keeping a loose reference to the target, read more on docs.

如何加载更多内容:

如果您将 loadOnDemandMode 设置为 Auto，则每当用户到达滚动结束时都会触发 loadMoreDataRequested 事件.

If you set loadOnDemandMode to Auto then loadMoreDataRequested event will be triggered whenever user reaches the end of scrolling.

loadOnDemandBufferSize 决定在滚动结束应触发事件.

loadOnDemandBufferSize decides how many items before the end of scroll the event should be triggered.

阅读有关文档的更多信息.

如何更新数组:

这正是 addMoreItemsFromSource 函数中展示的内容.在链接到列表视图的 ObservableArray 上使用 .push(item).

That's exactly what showcased in addMoreItemsFromSource function. Use .push(item) on the ObservableArray that is linked to your list view.

这篇关于nativescript radlist 视图按需加载是如何工作的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！