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

環境
Salesfoce

1.PropertyPaginatorController.js ファイル

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
({
previousPage : function(component) {
var pageChangeEvent = component.getEvent("pagePrevious");
pageChangeEvent.fire();
},
nextPage : function(component) {
var pageChangeEvent = component.getEvent("pageNext");
pageChangeEvent.fire();
}
})
({ previousPage : function(component) { var pageChangeEvent = component.getEvent("pagePrevious"); pageChangeEvent.fire(); }, nextPage : function(component) { var pageChangeEvent = component.getEvent("pageNext"); pageChangeEvent.fire(); } })
({
      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 コンポーネント

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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);
}
}
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); } }
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 モジュールが使用されるということです。

IT

Posted by arkgame