Oracle JET Web 應用程式中的資料連結元件

簡介

本教學課程示範如何在 Oracle JavaScript Extension Toolkit (Oracle JET) Web 應用程式中使用本機 JSON 文件。

Oracle JET 是一種開發工具程式，提供許多資料提供者類別來管理各種來源的資料。在 viewModel 中，您將使用從 JSON 檔案讀取的資料填入 MutableArrayDataProvider 執行處理，然後將 MutableArrayDataProvider 執行處理連結至檢視中的 Oracle JET 自訂 HTML 元素。

目標

完成此教學課程時，您將瞭解如何從 JSON 文件讀取資料至資料提供者、新增 Oracle JET 清單檢視元件，以及將資料連結至 JSON 資料物件。

必要條件

作業 1：下載 JSON 文件並檢查資料

  1. 將 store_data.json 檔案下載至 JET_Web_Application/src/ts/ 目錄。
  2. 在 Web 瀏覽器中開啟 store_data.json 檔案，並檢視資料結構。store_data.json 檔案包含活動物件及其特性的清單。每個活動都包含具有自己特性的項目陣列。

作業 2：在 ViewModel 中填入資料提供者

將資料從 JSON 檔案植入 Oracle JET ojmutablearraydataprovider 物件。

  1. 瀏覽至 JET_Web_Application/src/ts/viewModels 目錄，然後在編輯器中開啟 dashboard.ts 檔案。

  2. 從 store_data.json 檔案匯入資料，使資料可在 ViewModel 中使用。

    import * as AccUtils from "../accUtils";
import * as ko from "knockout";
import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");
import "ojs/ojselectsingle";
import "ojs/ojlabel";
import "ojs/ojchart";
import * as storeData from "text!../store_data.json";

  3. 如果沒有，請匯入用來存放 JSON 資料的 ojmutablearraydataprovider 模組。

    import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");

  4. 在 DashboardViewModel() 類別之前，請先定義類型別名 Activity，其中包含 number 類型的 id 欄位。

    ...
type Activity = {
  id: number;
}

class DashboardViewModel {

  5. 在 DashboardViewModel() 類別中，為將在下一個步驟建立的 activityDataProvider 新增類型。

    class DashboardViewModel {

   val: ko.Observable<string>;
   . . .
   chartDataProvider: MutableArrayDataProvider<string, {}>;
   chartData: Array<Object>;
   activityDataProvider: MutableArrayDataProvider<Activity["id"], Activity>;    
   . . .

  6. 在 DashboardViewModel() 類別的 constructror 方法中，建立 MutableArrayDataProvider (activityDataProvider) 的執行處理，然後使用 JSON.parse 方法讀取 JSON 資料。

    constructor() {
   this.val = ko.observable("pie");
   ...

   this.activityDataProvider = new MutableArrayDataProvider<
      Activity["id"],
      Activity
      >(JSON.parse(storeData), {
         keyAttributes: "id", 
      });
 . . .

  7. 匯入 Oracle JET 清單檢視元件模組。

    import * as storeData from "text!../store_data.json";
import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");
import "ojs/ojlistview";

    ojlistview 模組支援此教學課程下一區段中的檢視。

  8. 儲存 dashboard.ts 檔案。您的 dashboard.ts 檔案看起來應類似 final-data-bind-dashboard-ts.txt。

任務 3：資料連結檢視中的清單檢視元件

oj-list-view 元素是 Oracle JET 自訂 HTML 元素，具備增強 HTML 清單版本的互動式功能。您可以將 viewModel 中植入的 activityDataProvider 變數連結至「清單檢視」的 data 屬性，以提供資料至清單。

  1. 瀏覽至 JET_Web_Application/src/ts/views 目錄，然後在編輯器中開啟 dashboard.html 檔案。

  2. In the dashboard.html file, add a div element with an id attribute value of activitiesContainer above the itemDetailsContainer div element that contains the Oracle JET Select Single and Chart components.

    <div class="oj-hybrid-padding">
  <h1>Product Information</h1>
   <div id="activitiesContainer">
      </div>
   <div id="itemDetailsContainer">
      <oj-label for="basicSelect">Select Chart:</oj-label>
      ...
   </div>

  3. 在 activitiesContainer div 元素內，新增含有 data 屬性的 oj-list-view 元素，該屬性使用單向連結來取得清單資料。

    <div class="oj-hybrid-padding">
<h1>Product Information</h1>
 <div id="activitiesContainer">
  <oj-list-view id="activitiesList" aria-labelledby="activitiesHeader" data="[[activityDataProvider]]" gridlines.item="visible">
   </oj-list-view>
 </div>

    我們也為 gridlines 屬性指定 visible 值，讓格線顯示在清單中的項目之間，以 aria-labelledby 屬性作為輔助功能最佳實務。

  4. 在您建立的 oj-list-view 元素內，新增含 slot 屬性的 HTML template 元素，以呈現清單中的每個項目。

    <div class="oj-hybrid-padding">
<h1>Product Information</h1>
<div id="activitiesContainer">
   <oj-list-view id="activitiesList" aria-labelledby="activitiesHeader" data="[[activityDataProvider]]" gridlines.item="visible">
      <template slot="itemTemplate">
         </template>
   </oj-list-view>
</div>

  5. Within the template element, add another div element that contains an oj-bind-text custom HTML element with a value attribute that uses a one-way binding to get the list data from the current data object.

    <div class="oj-hybrid-padding">
<h1>Product Information</h1>
<div id="activitiesContainer">
   <oj-list-view id="activitiesList" aria-labelledby="activitiesHeader" data="[[activityDataProvider]]" gridlines.item="visible">
      <template slot="itemTemplate">
            <div>
               <strong>
                  <oj-bind-text value="[[$current.data.name]]"></oj-bind-text>
               </strong>
            </div>
         </template>
   </oj-list-view>
</div>

  6. 新增 HTML h3 元素以提供活動清單的標頭。

    <div class="oj-hybrid-padding">
<h1>Product Information</h1>
<div id="activitiesContainer">
   <h3 id="activitiesHeader">Activities</h3>
  <oj-list-view id="activitiesList" aria-labelledby="activitiesHeader" data="[[activityDataProvider]]" gridlines.item="visible">
. . .

  7. 在 itemDetailsContainer div 中，新增 h3 元素和 oj-label 元素，以提供圖表的標頭。

    . . .
<div id="itemDetailsContainer">
  <h3>Item Details</h3>
    <oj-label for="basicSelect">Select Chart:</oj-label>
. . .

  8. 儲存 dashboard.html 檔案。您的 dashboard.html 檔案看起來應類似 final-data-bind-dashboard-html.txt。

任務 4：執行 Web 應用程式

  1. 在終端機視窗中，變更為 JET_Web_Application 目錄，然後執行應用程式。

    $ ojet serve

    您的瀏覽器會顯示 Web 應用程式儀表板頁籤中顯示的活動清單。

    「產品資訊」區域。

    output.png 圖解的描述

  2. 關閉顯示您執行中 Web App 的瀏覽器視窗或頁籤。

  3. 在終端機視窗中，按 Ctrl+C，如果出現提示，請輸入 y 以結束 Oracle JET 工具批次工作。

  4. 離開終端機視窗，開啟下一自學課程。

其他學習資源

探索 docs.oracle.com/learn 上的其他實驗室，或是存取更多免費學習內容至 Oracle Learning YouTube 通道。此外，瀏覽 education.oracle.com/learning-explorer 以成為 Oracle Learning Explorer。

如需產品文件，請瀏覽 Oracle Help Center。