RadListViewの要求時読み込み

要求時読み込み（ロードオンデマンド）機能は、帯域幅の使用を最適化してUXを改善するためにデータをチャンク（ページ）でロードする必要がある場合に特に役立ちます。 "loadOnDemandMode" プロパティの値は、 オンデマンドでのロードに使用されるモードを決定します。 "ListViewLoadOnDemandMode" 列挙からの値を受け入れます。

• "Manual" - このモードでは、ユーザーは次のデータページを手動でリクエストする必要があります
• "Auto" - このモードでは、ユーザーがスクロール可能なリストの最後に近づくと、次のデータページが自動的に要求されます
• "None" - このモードでは、ロードオンデマンドは無効です

さらに項目をロードする必要がある場合、RadListViewはloadMoreDataRequestedイベントを発生させます。 そのイベントは、引数のreturnValueをfalseに設定し、 trueパラメーターを指定して "notifyLoadOnDemandFinished(disableLoadOnDemand)" を 呼び出すまで発生し続けます。 これは、データストリームの最後に到達し、ロードするデータがなくなったときに使用できます。

さらに、RadListView は "loadOnDemandBufferSize" プロパティを公開しています。 このプロパティは、スクロールに残されたアイテムの数を決定し、その数に達するとloadMoreDataRequestedイベントを発生させます。 このプロパティは、ロードオンデマンドモードが "Auto" に設定されている場合に使用します。

「loadMoreDataRequested」イベントの処理

次のコードサンプルは、"loadMoreDataRequestedEvent" イベントの 処理方法を示しています。 次のXMLスニペットが示すように、最初にイベントを定義する必要があります。

例1：XMLでのloadMoreDataRequestedの定義：

<lv:RadListView id="ls" items="{{ dataItems }}"  row="0" loadOnDemandMode="Manual" loadMoreDataRequested="{{onLoadMoreItemsRequested}}">

イベントハンドラーでデータリクエストを作成し、データチャンクの準備ができたらリストに反映します。

例2：loadMoreDataRequestedをコードで処理する：

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

    if (listView) {
        // Call the optimized function for on-demand loading finished.
        // (with 0 because the ObservableArray has already
        // notified about the inserted items)
        listView.notifyAppendItemsOnDemandFinished(0, this._sourceDataItems.length === 0);
    }
}

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

ロードオンデマンドビューのカスタマイズ

リストの最後に表示されるロードオンデマンドビューをカスタマイズするには、 "loadOnDemandItemTemplate" プロパティを使用する必要があります。 以下に簡単な例を示します。

例3：カスタムのloadOnDemandItemTemplateを提供します。

<lv:RadListView.loadOnDemandItemTemplate>
	<GridLayout style="background-color: #7fff7f;" height="44" bottomMargin="20">
		<Label text="Load More" horizontalAlignment="center" verticalAlignment="center"/>
	</GridLayout>
</lv:RadListView.loadOnDemandItemTemplate>

"loadOnDemandItemTemplate" プロパティは、 "itemTemplate" プロパティと同じように使用されます。 このテンプレートから生成されたビューのバインディングコンテキストは、ページに割り当てられたものであることに注意してください。

参考文献

このシナリオを実際に見てみたいですか？ GitHubのSDKサンプルリポジトリを確認してください。これとNativeScript UIを使用した他の多くの実用的な例があります。

• ロードオンデマンドの例

役立つと思われる関連記事：

• 表示のリフレッシュ