Aura 開発者向け javascriptの移行サンプル
環境
Salesfoce
1.PropertyPaginatorController.js ファイル
({
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 コンポーネント
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 モジュールが使用されるということです。