在 Oracle JET Web 应用程序中创建明细视图

简介

Oracle JavaScript Extension Toolkit (Oracle JET) 组件保留数据源定义的主数据和详细信息数据对象的分层关系。在 Oracle JET Web 应用程序的 viewModel 中，可以使用 Oracle JET API 创建数据提供程序对象。该对象表示从 JavaScript 对象表示法 (JSON) 文档数据存储的子数据对象填充的数据数组。Oracle JET 数据提供程序根据当前父数据对象的 id 键属性提取子数据对象。在 Oracle JET Web 应用程序视图中，Oracle JET 列表视图组件的 data 属性通过可观察的 Knockout 绑定到数据提供者。Knockout 可观测也在应用程序的 viewModel 源代码中声明。此代码作为明细列表数据提供商的实例填充可观察项。

目标

在本教程中，您将读取本地 JSON 文档中的主从分层数据，并在 Oracle JET Web 应用程序中显示详细信息视图。您将学习如何数据绑定子数据对象的项以填充 Oracle JET 列表视图组件、多个 Oracle JET 输入文本组件和 Oracle JET 图表组件。

先决条件

开发环境已设置为创建 Oracle JET 应用程序，并安装了 JavaScript 运行时、Node.js 和最新的 Oracle JET 命令行界面
完成此学习路径中的上一教程，以便您已创建 JET_Web_Application 文件夹

任务 1：在视图中绑定活动项目明细列表的数据

使用绑定到活动项目子对象的多个数据项的 Oracle JET 列表视图组件替换绑定到静态数据的“活动项目”列表。

导航到 JET_Web_Application/src/ts/views 目录并在编辑器中打开 dashboard.html 文件。

找到 div 元素（其中 id="container"），然后删除该元素及其包含的 oj-module 定制元素。

  <div id="activityItemsContainer" class="oj-flex-item oj-md-6 oj-sm-12">
    <div id="container">
      <oj-module config="[[moduleConfig]]"></oj-module>
    </div>
  </div>

<!-- Delete the div element with id="container" so that your code is similar to the following: -->

  <div id="activityItemsContainer" class="oj-flex-item oj-md-6 oj-sm-12">

  </div>
  . . . 

在 id="activityItemsContainer" 的 div 元素内，为“活动项”详细信息列表添加 h3 标题元素。

<div id="activityItemsContainer" class="oj-flex-item oj-md-6 oj-sm-12">
  <h3 id="itemsListHeader">Activity Items</h3>
</div>

在您创建的 h3 元素的结束标记之后，添加 oj-list-view 自定义 HTML 元素以显示“活动项”详细信息列表，添加带有 slot 属性的 template 元素以应用于详细信息列表的内容。
```
 <h3 id="itemsListHeader">Activity Items</h3>
   <oj-list-view id="itemsList" class="item-display" data="[[itemsDataProvider]]" aria-labelledby="itemsListHeader" gridlines.item="visible">
     <template slot="itemTemplate">

     </template>
   </oj-list-view>
```
以 slot 属性作为占位符的内嵌 HTML template 元素中使用的 Oracle JET 列表视图组件在运行时实例化“活动项”明细列表的内容。

在您创建的 template 元素中，添加三个包含代码的 div 元素，以绑定每个“活动项”子对象的图像和名称数据项。

<template slot="itemTemplate">
  <div class="oj-flex no-wrap">
    <span class="demo-thumbnail oj-flex-item"
      :style.background-image="[[' url('+$current.data.image+')']]"></span>
    <div class="demo-content oj-flex-item">
      <div>
        <strong>
          <oj-bind-text value="[[$current.data.name]]"></oj-bind-text>
        </strong>
      </div>
    </div>
  </div>
</template>

$current.data.image 和 $current.data.name 代码绑定数据，HTML template 元素显示“活动项”详细信息列表的图像和活动项名称。$current 前缀表示 Oracle JET 列表视图组件的数据提供程序传递到模板中的当前子对象。

保存 dashboard.html 文件并将其保留在编辑器中打开。

您的文件应类似于 detail-list-task1-dashboard-html.txt。

任务 2：在 ViewModel 中创建活动项子对象

将您在上一个学习路径中创建的 oj-module 内嵌模板替换为 JSON 文档调用以显示“活动项”列表，以便从本地 JSON 文档读取“活动项”子对象。在 itemsDataProvider 中，创建表示 JSON 文档定义的子对象数组的 Oracle JET MutableArrayDataProvider 类的实例。然后将 itemsArray 实例绑定到可观察的 itemsDataProvider。视图中的 Oracle JET 列表视图组件参考了在其 data 属性上观察到的此组件，以显示“活动项”明细列表。

导航到 JET_Web_Application/src/ts/viewModels 目录并在编辑器中打开 dashboard.ts 文件。

在 dashboard.ts 文件顶部，在类型声明 Activity 之后声明以下 Item 类型。

type Activity = {
   id: number;
};

type Item = {
   id: number;
   name: string;
   short_desc: string;
   price: number;
   quantity: number;
   quantity_shipped: number;
   quantity_instock: number;
   activity_id: number;
   image: string;
};
. . . 

从 const lg_xl_view 的声明中删除代码，但不包括 this.chartTypes 的声明。代码块以注释行结尾，该行内容为 End of oj-module code。JSON 文档调用将替换静态数据和内嵌模板代码。

您的文件应类似于 detail-list-task2a-dashboard-ts.txt。
从 dashboard.ts 顶部的模块导入中，删除未使用的 HtmlUtils、ResponsiveUtils、ResponsiveKnockoutUtils 和 ojmodule-element import 语句。

将 ojs/ojavatar 模块的 import 语句添加到导入列表中。ojavatar 模块支持本教程下一节中的视图。

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";
import "ojs/ojlistview";
import "ojs/ojavatar";

在 this.activityDataProvider 定义之后，在 constructor 函数中，为 activitiesArray 和 itemsArray 添加定义。然后将 this.itemsDataProvider 声明为 MutableArrayDataProvider 的实例。这将对存储数据进行语法分析，并使第一个活动父对象的子对象在 Oracle JET 列表视图组件中可用。在下一个教程中，使用事件处理程序动态设置“活动”对象。

. . . 
let activitiesArray = JSON.parse(storeData);
let itemsArray = activitiesArray[0].items;

this.itemsDataProvider = new MutableArrayDataProvider<Item["id"], Item>(
  itemsArray,
  { keyAttributes: "id" }
  );

} // closing bracket of constructor function
. . . 

然后删除 large 和 moduleConfig 的未使用类型注释，并为 itemsArray 和 itemsDataProvider 添加类型注释。

class DashboardViewModel {
    chartTypes: Array<Object>;
    chartTypesDP: MutableArrayDataProvider<ChartType["value"], ChartType>;
    chartData: Array<Object>;
    chartDataProvider: MutableArrayDataProvider<string, {}>;
    activityDataProvider: MutableArrayDataProvider<Activity["id"], Activity>;
    val: ko.Observable<string>;
    itemsArray: Array<Object>;
    itemsDataProvider: MutableArrayDataProvider<Item["id"], Item>;

您的文件应类似于 detail-list-task2b-dashboard-ts.txt。

任务 3：运行 Web 应用程序

ojet serve 命令允许您更改应用程序代码，这些代码会立即反映在 Web 浏览器中。

在终端窗口中，转到 JET_Web_Application 目录并运行应用程序。
```
$ ojet serve
```
在仪表盘选项卡中，Web 浏览器显示具有活动项标题的数据库详细信息列表。

插图 formatted_master_detail_list.png 的说明
将终端窗口和显示 Web 应用程序的浏览器保持打开状态。

任务 4：视图中的数据绑定项目详细信息和饼图

将“项目详细信息”饼图和条形图替换为以下元素：

绑定到活动项目子对象的项目图像的 Oracle JET 头像组件
多个 Oracle JET 文本字段组件绑定到该活动项子对象的数据项
绑定到同一活动项目子对象的图表数据项的饼图组件

在 dashboard.html 文件的 div 元素（其中 id="itemDetailsContainer"）中，找到 "Item Details"（项详细信息）标题。在标题下，添加水平规则，后跟绑定到活动项目子对象的图像数据项的 oj-avatar 自定义 HTML 元素。
```
<div id="itemDetailsContainer" class="oj-flex-item oj-panel oj-bg-neutral-30 oj-md-6 oj-sm-12">
  <h3>Item Details</h3>
  <hr class="hr-margin" />
  <oj-avatar role="img" size="lg" :aria-label="[['product image for '+ itemData().name]]"
    :src="[[itemData().image]]" class="float-right">
  </oj-avatar>
```
The itemData observable populates the Oracle JET Avatar component by using a data provider instance that you create in the app viewModel. The itemData().image function is the Knockout observable notation for reading the current value of a data item. The data item is identified by the image property of the Activity Items child object.
在 dashboard.html 中创建的 oj-avatar 元素的结束标记下方，删除 oj-label for="basicSelect" 定制 HTML 元素和 oj-select-single 元素。

在您创建的 oj-avatar 元素的结束标记下，添加四个 div 元素，其中 oj-bind-text 自定义 HTML 元素绑定到“活动项”子对象的名称、简短说明、价格和 ID 数据项。

. . . 
</oj-avatar>
  <div id="itemName" class="data-name">
    <oj-bind-text value="[[itemData().name]]"></oj-bind-text>
  </div>
  <div id="itemDesc" class="data-desc">
    <oj-bind-text value="[[itemData().short_desc]]"></oj-bind-text>
  </div>
  <div id="itemPrice">
    <oj-bind-text value="[['Price: ' + itemData().price + ' each']]"></oj-bind-text>
  </div>
  <div id="itemId">
    <oj-bind-text value="[['Item Id: ' + itemData().id]]"></oj-bind-text>
  </div>
. . . 

itemData 可观察到使用您在应用程序 viewModel 中创建的数据提供程序填充 Oracle JET 文本绑定组件。itemData().<prop_name> 函数读取指定数据项的当前值。数据项由“活动项”子对象的 name、short_desc、price 和 id 属性标识。

导航到 JET_Web_Application/src/css 目录并打开 app.css 文件以添加以下样式定义。

.hr-margin {
  margin-top: 12px;
}

.data-name {
  font-size: 20px;
  font-weight: bolder;
}

.data-desc {
  font-size: 14px;
  font-weight: 400;
  font-style: italic;
  margin-bottom: 10px;
}

.float-right {
  float: right;
}

您的文件应类似于 app-css-final.txt。

在您创建的 div 元素下方，删除 oj-chart id="barChart" 定制 HTML 元素。

在 div id="itemId" 元素的结束 </div> 标记之后，为“活动项”子对象添加绑定到饼图系列的新 div 元素和 oj-chart 自定义 HTML 元素。

. . . 
<div id="itemId">
  <oj-bind-text value="[['Item Id: ' + itemData().id]]"></oj-bind-text>
</div>
<div>
  <oj-chart type="pie" series="[[pieSeriesValue]]" animation-on-display="auto" 
    animation-on-data-change="auto"
    hover-behavior="dim" legend.position="bottom" class="chartStyle">
  </oj-chart>
</div>
. . . 

使用您在应用程序 viewModel 中创建的数据数组来填充 Oracle JET 饼图组件。pieSeriesValue 可观察到此组件。

保存 dashboard.html 文件。

您的文件应类似于 final-detail-list-dashboard-html.txt。

任务 5：在 ViewModel 中设置“项目详细信息”和“饼图组件”的可观察项

从“活动项”子对象中获取数据项，并将观察结果填充到数据绑定视图组件。在此视图中，各个“项详细信息”组件的 value 属性引用了可观察的 itemData。饼图组件的 series 属性引用了从相同数据项到图表数据的 pieSeriesValue 可观测数据。

在 dashboard.ts 文件中，删除以 this.val 开头并以 this.chartTypesDP 结尾的代码块。同时删除已删除变量的未使用类型注释。类型注释列表和 constructor() 函数的开头应类似于以下示例。

class DashboardViewModel {
  activityDataProvider: MutableArrayDataProvider<Activity["id"], Activity>;
  itemsArray: Array<Object>;
  itemsDataProvider: MutableArrayDataProvider<Item["id"], Item>;

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

将 itemData 和 pieSeriesValue 类型注释添加到 DashboardViewModel 类。

class DashboardViewModel {
  activityDataProvider: MutableArrayDataProvider<Activity["id"], Activity>;
  itemsArray: Array<Object>;
  itemsDataProvider: MutableArrayDataProvider<Item["id"], Item>;
  itemData: ko.Observable<any>;
  pieSeriesValue: ko.ObservableArray;

  constructor() {
. . . 

在 this.itemsDataProvider 语句之后，将可观察的 itemData 设置为 JSON 文档中引用第一个活动父对象以及与该活动关联的第一个活动项子对象。

  this.itemsDataProvider = new MutableArrayDataProvider<Item["id"], Item>(
    itemsArray,
    { keyAttributes: "id" }
  );

  this.itemData = ko.observable(''); 
  this.itemData(activitiesArray[0].items[0]);

}   // End of constructor function

最后，在 itemData 可观测的声明下，将 this.pieSeriesValue 设置为可观察的。

this.itemData = ko.observable(''); 
this.itemData(activitiesArray[0].items[0]);

this.pieSeriesValue = ko.observableArray([]);

let pieSeries = [
  { name: "Quantity in Stock", items: [this.itemData().quantity_instock] },
  { name: "Quantity Shipped", items: [this.itemData().quantity_shipped] }
];
this.pieSeriesValue(pieSeries);

任务 6：查看主列表和明细列表

返回浏览器以查看 Web 应用程序中的更改。

在 Web 应用程序的“仪表盘”选项卡中，数据包 Oracle JET 文本字段、头像和饼图将显示在“项详细信息”容器中，但列表不响应选择。在下一个教程中，您创建的事件处理程序将添加选择功能。

插图 formatted_master_detail_items_list.png 的说明
关闭显示正在运行的 Web 应用程序的浏览器窗口或选项卡。
在终端窗口中，按 Ctrl+C，如果出现提示，输入 y 以退出 Oracle JET 工具批处理作业。