数据绑定 Oracle JET Web 应用程序中的组件

简介

本教程演示如何在 Oracle JavaScript Extension Toolkit (Oracle JET) Web 应用程序中使用本地 JSON 文档。

Oracle JET 是一个开发工具包，它提供了许多数据提供商类来管理各种来源的数据。在 viewModel 中，将使用从 JSON 文件读取的数据填充 MutableArrayDataProvider 的实例，然后将 MutableArrayDataProvider 实例绑定到视图中的 Oracle JET 定制 HTML 元素。

目标

完成本教程后，您将了解如何将数据从 JSON 文档读取到数据提供方，添加 Oracle JET 列表视图组件，以及将组件的数据绑定到 JSON 数据对象。

先决条件

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

任务 1：下载 JSON 文档并检查数据

将 store_data.json 文件下载到 JET_Web_Application/src/ts/ 目录。
在 Web 浏览器中打开 store_data.json 文件并查看数据结构。store_data.json 文件包含活动对象及其属性的列表。每项活动都包含一系列具有各自属性的项目。

任务 2：在 ViewModel 中填充数据提供程序

将数据从 JSON 文件推送到 Oracle JET ojmutablearraydataprovider 对象。

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

从 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";

如果不存在，请导入将用于保存 JSON 数据的 ojmutablearraydataprovider 模块。
```
import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");
```
在 DashboardViewModel() 类之前，定义包括 number 类型的 id 字段的类型别名 Activity。
```
...
type Activity = {
  id: number;
}

class DashboardViewModel {
```

在 DashboardViewModel() 类中，为将在下一步中创建的 activityDataProvider 添加类型。

class DashboardViewModel {

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

在 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", 
      });
 . . .

导入 Oracle JET 列表视图组件模块。

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

ojlistview 模块支持本教程下一节中的视图。

保存 dashboard.ts 文件。dashboard.ts 文件应类似于 final-data-bind-dashboard-ts.txt。

任务 3：在视图中绑定列表视图组件的数据

oj-list-view 元素是具有交互功能的 Oracle JET 自定义 HTML 元素，这是 HTML 列表的增强版本。通过将 viewModel 中填充的 activityDataProvider 变量绑定到列表视图的 data 属性，可以将数据提供给列表。

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

在 dashboard.html 文件中，在包含 Oracle JET Select Single and Chart 组件的 itemDetailsContainer div 元素上添加 id 属性值为 activitiesContainer 的 div 元素。

<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>

在 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 属性显示为可访问性最佳实践。

在您创建的 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>

在模板元素中，添加另一个包含带有 value 属性的 oj-bind-text 自定义 HTML 元素的 div 元素，该元素使用单向绑定从当前数据对象获取列表数据。

<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>

添加 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">
. . .

在 itemDetailsContainer div 中，添加 h3 元素和 oj-label 元素以提供图表的标头。

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

保存 dashboard.html 文件。dashboard.html 文件应类似于 final-data-bind-dashboard-html.txt。

任务 4：运行 Web 应用程序

在终端窗口中，转到 JET_Web_Application 目录并运行应用程序。
```
$ ojet serve
```
您的浏览器将显示 Web 应用程序的仪表盘选项卡中可见的活动列表。

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