天天看點

SAP Spartacus Cost Center list的實作原理

CostCenter list對應的HTML dom元素:cx-org-list class=orgCostCenter

SAP Spartacus Cost Center list的實作原理

cx-org-list selector實作的Component:ListComponent

SAP Spartacus Cost Center list的實作原理
SAP Spartacus Cost Center list的實作原理

TODO:研究這個class什麼時候加上去的:

SAP Spartacus Cost Center list的實作原理

list裡Add button的url是根據目前頁面綁定的模型,動态建立的:

SAP Spartacus Cost Center list的實作原理

誰使用了cx-org-list這個selector來展示list?

CompanyPageTemplate

SAP Spartacus Cost Center list的實作原理
SAP Spartacus Cost Center list的實作原理

我們來觀察一下進入cost center 清單時,Spartacus向背景發送的HTTP請求:

https://spartacus-dev0.eastus.cloudapp.azure.com:9002/occ/v2/powertools-spa/cms/pages?pageType=ContentPage&pageLabelOrId=%2Forganization%2Fcost-centers&lang=en&curr=USD

參數:

SAP Spartacus Cost Center list的實作原理

uid:ManageCostCenters

BodyContentSlot-ManageCostCenters這個slot id裡,存放了CMS Component:ManageCostCentersListComponent

SAP Spartacus Cost Center list的實作原理

根據這個關鍵字到Spartacus裡查找:

即可發現ManageCostCentersListComponent對應的Angular Component是:ListComponent

SAP Spartacus Cost Center list的實作原理

繼續閱讀