Jerry 從 2014 年加入 SAP成都研究院 CRM Fiori 開發團隊之后開始接觸 SAP UI5，曾經在 SAP 社區和“汪子熙”微信公眾號上發表過多篇關于 SAP UI5 工作原理和源碼解析的文章。

在 Jerry 這篇文章對 SAP UI5 一無所知的新手，從哪些材料開始學習比較好？ 曾經提到，Jerry 也是從 SAP UI5 菜鳥一路走過來，深知只有 ABAP 開發背景的開發者，向 SAP UI5 開發領域轉型的不易，因此我在業余時間設計了這份適合 SAP UI5 初學者的學習教程，把開發一個完整的 SAP UI5 應用的流程，拆分成若干個步驟，力求每個步驟里，把涉及到的知識點都涵蓋到。這些知識點可能不像我的 UI5 源碼分析系列文章那么深入，但力求淺顯易懂，便于 SAP UI5 初學者理解。

本教程每一個步驟的源代碼，都存放在我的 Github 上，分別用文件夾 01，02，03 等等來標識。

每一個步驟均是前一步驟的基礎上，添加了若干新特性。建議零基礎或者對 SAP UI5 知之甚少的初學者，按照順序從第一個步驟開始循序漸進地學習，把這些代碼下載到本地，配合教程的文字講解，自己動手，以加深理解。

大家如果對教程的每個步驟有任何疑問，歡迎在教程對應的步驟文章里給我評論，進行留言。

本教程的第四個步驟，我們學習了 SAP UI5 MVC 架構中的 V：XML 視圖：

• SAP UI5 初學者教程之四：XML 視圖初探

第五個教程，我們學習了 MVC 中的 C：Controller 即控制器：

• SAP UI5 初學者教程之五：視圖控制器初探

本步驟，我們將以 JSON 模型為例，學習 SAP UI5 MVC 剩下的 M - Model，模型層的設計。

先看按照這個步驟完成的 SAP UI5 應用的效果：

http://localhost:8080/webapp/index.html

這個應用里我們看見了兩個控件，分別是：

• Say Hello 按鈕控件
• 值為 World，描述信息為 Hello World 的 Input 控件

本步驟的全部源代碼，位于我 Github 這個代碼倉庫的 07 文件夾之下：

https://github.com/wangzixi-diablo/ui5-tutorial/tree/main/07

其中 index.js 和 index.html, 與前一步驟相比并無變化。

controller 和 view 文件夾下的 App.controller.js 以及 App.view.xml 這兩個文件，分別作了增強，以支持新引入的 JSON model.

下面是本步驟針對 App.controller.js 和 App.view.xml 所做的增強的關鍵點詳細介紹。

App.view.xml

兩處關鍵點：

(1) 使用 View 標簽頁的 controllerName 屬性，給該視圖指定其綁定的控制器名稱為 App. 按照 SAP UI5 的規定，該控制器的實現文件名稱遵循下列格式：

<控制器名稱>.controller.js,

故最后文件名應為 App.controller.js

這個文件位于文件夾 controller 內。

關于剩下關鍵點的詳細介紹，請參考我的文章：SAP UI5 初學者教程之七 - JSON 模型初探

總結

以上是生活随笔為你收集整理的SAP UI5 初学者教程之七 - JSON 模型初探试读版的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。