Aura 開発者向け　javascriptの移行サンプル

2024年9月5日

環境
Salesfoce

1.PropertyPaginatorController.js ファイル

({
      previousPage : function(component) {
        var pageChangeEvent = component.getEvent("pagePrevious");
        pageChangeEvent.fire();
      },
      nextPage : function(component) {
        var pageChangeEvent = component.getEvent("pageNext");
        pageChangeEvent.fire();
      }
})

説明
Aura コンポーネントのクライアント側コントローラーは、名前―値ペアの
マッピングを含むオブジェクトリテラル表記法の JavaScript オブジェクトです。

2.paginator Lightning Web コンポーネント

import { LightningElement, api } from 'lwc';
export default class Paginator extends LightningElement {
    /** 現在のページ番号. */
    @api pageNumber;
    /** ページ上のアイテムの数. */
    @api pageSize;
    /** リスト内のアイテムの総数. */
    @api totalItemCount;
    previousHandler() {
        this.dispatchEvent(new CustomEvent('previous'));
    }
    nextHandler() {
        this.dispatchEvent(new CustomEvent('next'));
    }
    get currentPageNumber() {
        return this.totalItemCount === 0 ? 0 : this.pageNumber;
    }
    get isFirstPage() {
        return this.pageNumber === 1;
    }
    get isLastPage() {
        return this.pageNumber >= this.totalPages;
    }
    get totalPages() {
        return Math.ceil(this.totalItemCount / this.pageSize);
    }
}

主に重要なのは、Lightning Web コンポーネントでは標準の JavaScript モジュールが使用されるということです。