在 Oracle JET 虛擬 DOM App 中連結元件的資料

簡介

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

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

目標

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

必備條件

用來建立 Oracle JET 虛擬 DOM 應用程式 (包括安裝 Node.js) 的開發環境
完成此學習路徑的上一個教學課程，新增元件至 Oracle JET Virtual DOM 應用程式
下載至 JET-Virtual-DOM-app/src/components/ 目錄的 store_data.json

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

將 store_data.json 檔案下載至 JET-Virtual-DOM-app/src/components 目錄。
在 Web 瀏覽器中開啟 store_data.json 檔案，然後檢視資料結構。store_data.json 檔案包含活動物件及其特性的清單。每個活動都包含具有其專屬特性的項目陣列。

工作 2：在虛擬 DOM 應用程式中填入資料提供者

將資料從 JSON 檔案推送至 Oracle JET MutableArrayDataProvider 類別的執行處理。

瀏覽至 JET-Virtual-DOM-app/src/components/content 目錄，然後在編輯器中開啟 index.tsx 檔案。

從 store_data.json 檔案匯入資料，讓該資料可在您的虛擬 DOM 應用程式中使用。

import { h, ComponentProps } from "preact";
import { useState, useCallback } from "preact/hooks";
import "ojs/ojlabel";
import "ojs/ojselectsingle";
import { ojSelectSingle } from "ojs/ojselectsingle";
import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");
import "ojs/ojchart";
import { ojChart } from "ojs/ojchart";
import * as storeData from "text!../store_data.json";

您用來保存 JSON 資料的 MutableArrayDataProvider 模組已匯入上一個教學課程中。

在 Content () 函數之前，請先定義 Activity 類型別名，其中包含 number 類型的 id 欄位，以及 string 類型的 name 欄位。
```
...
type Activity = {
   id: number;
   name: string;
}

export function Content() {
. . .
```

此外，在 Content () 函數之前，請建立 MutableArrayDataProvider (activityDataProvider) 的執行處理，然後使用 JSON.parse 方法在 JSON 資料中讀取。

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

const parsedData = typeof storeData === "string" ? JSON.parse(storeData) : storeData;
const activityDataProvider = new MutableArrayDataProvider<Activity["id"], Activity>(
    parsedData,
   {
   keyAttributes: "id"
   }
 );

export function Content() {
. . .

匯入「Oracle JET 清單檢視」元件的類型定義與模組，以及「清單項目版面配置」元件的模組。

. . .
import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");
import "ojs/ojchart";
import { ojChart } from "ojs/ojchart";
import * as storeData from "text!../store_data.json";
import "ojs/ojlistview";
import { ojListView } from "ojs/ojlistview";
import "ojs/ojlistitemlayout";

儲存 index.tsx 檔案。

您的 index.tsx 檔案看起來應該類似於 final-data-bind-index-tsx.txt 。

任務 3：將資料連結至清單檢視元件

oj-list-view 元素是具有互動式功能的 Oracle JET 自訂 HTML 元素，其為 HTML 清單的增強版本。您可以將 activityDataProvider 執行處理連結至「清單檢視」元件的 data 屬性，以提供資料至清單。

在開啟的 index.tsx 檔案中，新增 div 元素，其 id 屬性值 activitiesContainer 位於包含「Oracle JET 選取單一」與「圖表」元件之 itemDetailsContainer div 元素上方。

<div class="oj-web-applayout-max-width oj-web-applayout-content">
   <h1>Product Information</h1>
   <div id="activitiesContainer">
      </div>
   <div id="itemDetailsContainer">
      <oj-label for="basicSelect">Select Chart:</oj-label>
         <oj-select-single
. . .

在 activitiesContainer div 元素中，新增含有 data 屬性的 oj-list-view 元素，該屬性參照我們先前建立的 MutableArrayDataProvider 執行處理 (activityDataProvider)。

<div class="oj-web-applayout-max-width oj-web-applayout-content">
<h1>Product Information</h1>
<div id="activitiesContainer">
        <oj-list-view id="activitiesList"
               aria-labelledby="activitiesHeader"
               data= {activityDataProvider}
               gridlines={gridlinesItemVisible}>
            </oj-list-view>
   </div>
<div id="itemDetailsContainer">
   <oj-label for="basicSelect">Select Chart:</oj-label>
   <oj-select-single
. . .

我們將 aria-labelledby 屬性指定為輔助功能最佳作法，同時也為 gridlines 屬性指定 gridlinesItemVisible 值，以在清單中的項目之間顯示格線。我們將執行其他步驟來存取「清單檢視」元件的 gridlines 屬性。

在您建立的 oj-list-view 元素中，新增含有 slot 和 render 屬性的 HTML template 元素，以轉譯清單中的每個項目。

  return (
   <div class="oj-web-applayout-max-width oj-web-applayout-content">
      <h1>Product Information</h1>
       <div id="activitiesContainer">
         <oj-list-view id="activitiesList"
                  aria-labelledby="activitiesHeader"
                  data= {activityDataProvider}
                  gridlines={gridlinesItemVisible}>
                        <template slot="itemTemplate" render={renderListItem}></template>
               </oj-list-view>
      </div>

在 return 陳述式內的 activitiesContainer div 內，新增 HTML h3 元素以提供活動清單的標頭。

<div id="activitiesContainer">
  <h3 id="activitiesHeader">Activities</h3>
  <oj-list-view
    id="activitiesList"
    aria-labelledby="activitiesHeader"
    data={activityDataProvider}
    gridlines={gridlinesItemVisible}
  >
    <template slot="itemTemplate" render={renderListItem}></template>
  </oj-list-view>
</div>

在 itemDetailsContainer div 中，新增 h3 元素以提供圖表的標頭。

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

在 Content() 函數中的 return 陳述式之前，新增傳回要在「清單檢視」元件中呈現之活動名稱清單的 renderListItem 函數。

. . .
export function Content() {

. . .
const renderListItem =
   (item: ojListView.ItemTemplateContext<Activity["id"], Activity>
   ) => {
   return (
      <li>
         <oj-list-item-layout>
         <div class="oj-typography-body-md">
            {item.data.name}
         </div>
         </oj-list-item-layout>
      </li>
   );
   } ;

return (
   . . .
      <oj-list-view . . .

在 Content() 函數之前，宣告 ListViewProps 類型，然後使用它來建立值為 visible 的變數 (gridlinesVisible)。

. . .
type ListViewProps = ComponentProps<"oj-list-view">;
const gridlinesItemVisible: ListViewProps["gridlines"] = { item: "visible" };

export function Content() {

  const renderListItem = . . .

儲存 index.tsx 檔案。

您的 index.tsx 檔案看起來應該類似於 index.tsx.txt 。

工作 4：執行虛擬 DOM 應用程式

在終端機視窗中，變更為 JET-Virtual-DOM-app 目錄，然後執行應用程式。
```
npx ojet serve
```
您的瀏覽器會顯示虛擬 DOM 應用程式中可見的活動清單。
關閉顯示您執行中虛擬 DOM 應用程式的瀏覽器視窗或頁籤。
在終端機視窗中，按 Ctrl+C，如果出現提示，請輸入 y 以結束 Oracle JET 工具批次工作。
將終端機視窗保持開啟，以開始進行下一次教學。

下一步

繼續本模組的下一個教學課程。

本教學課程是 Your First Oracle JET Virtual DOM App 模組的一部分。

您可以返回虛擬 DOM 學習路徑的主頁面，存取建置虛擬 DOM 應用程式的所有模組。

其他學習資源

在 docs.oracle.com/learn 上探索其他實驗室，或在 Oracle Learning YouTube 頻道上存取更多免費學習內容。此外，請造訪 education.oracle.com/learning-explorer 以成為 Oracle Learning Explorer。

如需產品文件，請造訪 Oracle Help Center 。

標題與著作權資訊

Data bind a component in an Oracle JET virtual DOM app

G40633-01

Oracle 和 (或) 其關係企業。