在 Oracle JET Web 应用程序中显示或隐藏内容

简介

Oracle JET oj-module 组件和 JavaScript 响应式实用程序类可以根据屏幕大小加载不同的视图。可以使用 oj-module 组件将视图和相应的 viewModel 绑定到元素来替换页面区域中的内容。

目标

完成本教程后，您将使用 Oracle JET oj-module 组件和响应式 TypeScript 代码定制 Oracle JET Web 应用程序来绑定视图和相应的 viewModel。

先决条件

开发环境已设置为创建 Oracle JET 应用程序，并安装了 JavaScript 运行时、Node.js 和最新的 Oracle JET 命令行界面
访问 Oracle JET 开发人员 CookBook
完成此学习路径中的上一个教程，以便您创建 JET_Web_Application 文件夹
已完成的应用程序 jet_web_application_responsive_design_final.zip（可选）已下载

任务 1：将模块组件添加到视图

使用配置对象在 Oracle JET oj-module 组件下定义视图和相应的 viewModel。

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

使用 id="activityItemsContainer" 查找 div 元素。在空的 div 中，添加一个包含 oj-module 自定义 HTML 元素的 div 容器，该元素包含定义了导航区域的 config 属性。

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

保存 dashboard.html 文件。

您的代码的外观应与 final-dashboard-html.txt 类似。

任务 2：更新 ViewModel 中的导入模块列表

在 dashboard.ts 文件的顶部，导入支持 Oracle JET 组件的模块。

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

在 ojlistview 模块之后，添加三个 JET 响应式 HTML 实用程序模块和 ojmodule-element 模块。

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 * as ResponsiveUtils from "ojs/ojresponsiveutils";
import * as ResponsiveKnockoutUtils from "ojs/ojresponsiveknockoututils";
import * as HtmlUtils from "ojs/ojhtmlutils";
import "ojs/ojmodule-element";

保存 dashboard.ts 文件。

导入块应类似于 import-block-ts.txt。

任务 3：在 ViewModel 中添加响应式加载代码

您希望为响应式布局中的不同屏幕大小加载不同的内容。可以使用 oj-module 装入不同的视图，方法是使用可观察、介质查询或可观察的定制介质查询。

打开 Oracle JET CookBook 并导航到 Cookbook 主页。单击菜单栏中的框架，然后单击响应式行为，然后单击响应式加载。
您可以在其中访问 ResponsiveUtils 名称空间的 API 文档。然后滚动到“方法”部分并阅读有关 getFrameworkQuery 方法的信息。

在 dashboard.ts 文件的 chartDataProvider 声明下方，添加内嵌模板代码块以传递到 oj-module 定制 HTML 元素。

this.chartDataProvider = new MutableArrayDataProvider(this.chartData, {
      keyAttributes: "id",
});

// Define the oj-module inline template for Activity Items list
const lg_xl_view =
      '<h3 id="activityItemsHeader">Activity Items</h3>' +
      '<oj-list-view style="font-size: 18px" aria-labelledby="activityItemsHeader">' +
      "<ul>" +
      "<li>" +
      '<div class="oj-flex-item">' +
      "<p>SureCatch Baseball Glove</p>" +
      "<p>Western R16 Helmet</p>" +
      "<p>Western C1 Helmet</p>" +
      "<p>Western Bat</p>" +
      "</div>" +
      "</li>" +
      "<li>" +
      '<div class="oj-flex-item">' +
      "<p>Air-Lift Tire Pump</p>" +
      "<p>Intact Bike Helmet</p>" +
      "<p>Nimbus Bike Tire</p>" +
      "<p>Refill Water Bottle</p>" +
      "<p>Swift Boys 21 Speed</p>" +
      "</div>" +
      "</li>" +
      "</ul>" +
      "</oj-list-view>";

大屏幕和大屏幕的内嵌数据节点通过 lg_xl_view 变量传递。

在 lg_xl_view 变量的定义下，定义通过 sm_md_view 变量传递中小型屏幕的内嵌数据节点的代码。

// Display this content for small and medium screen sizes
const sm_md_view =
      '<div id="sm_md" style="background-color:lightcyan; padding: 10px; font-size: 10px">' +
      '<h3 id="activityDetailsHeader">Activity Details</h3>' +
      '<oj-list-view style="font-size: 18px" aria-labelledby="activityDetailsHeader">' +
      "<ul>" +
      "<li>" +
      '<div class="oj-flex-item">' +
      "<p>SureCatch Baseball Glove</p>" +
      "<p>Western R16 Helmet</p>" +
      "<p>Western C1 Helmet</p>" +
      "<p>Western Bat</p>" +
      "</div>" +
      "</li>" +
      "</ul>" +
      "</oj-list-view>" +
      "</div>";

在 sm_md_view 变量的定义下，定义使用可观察的 this.large 介质查询为不同屏幕大小加载视图的代码。

// Identify the screen size and display the content for that screen size
const lgQuery = ResponsiveUtils.getFrameworkQuery(
   ResponsiveUtils.FRAMEWORK_QUERY_KEY.LG_UP
);

this.large = ResponsiveKnockoutUtils.createMediaQueryObservable(lgQuery);
this.moduleConfig = ko.pureComputed(() => {
   let viewNodes = HtmlUtils.stringToNodeArray(
   this.large() ? lg_xl_view : sm_md_view
   );
   return { view: viewNodes };
});

/**
 * End of oj-module code
 */

通过使用 HTML 实用程序函数，可以在 this.large 变量中获取框架介质查询字符串。如果 this.large() 中的介质查询字符串值等于 LG_UP（大或高），则会加载 lg_xl_view 变量中的 HTML 代码。如果 this.large() 中的介质查询字符串值不等于 LG_UP，则会加载 sm_md_view 变量中的 HTML 代码。

将 large 和 moduleConfig 的类型声明添加到类。

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>;
   large: ko.Observable<boolean>;
   moduleConfig: ko.PureComputed<any>;

保存 dashboard.ts 文件。

您的文件应类似于 final-dashboard-ts.txt。

任务 4：运行 Web 应用程序

在终端窗口中，转到 JET_Web_Application 目录并运行应用程序。
```
$ ojet serve
```
Oracle JET 工具在本地 Web 浏览器中运行 Web 应用程序，您可以在其中查看仪表盘内容。

插图 final-app.png 的说明

要显示 sm_md_view 变量中的内容，请将屏幕调整为中小大小。请注意“Activity Details（活动详细信息）”标题下项的简短列表，此标题突出显示浅绿色。

插图 Small-screen.png 的说明

要显示 lg_xl_view 变量中的内容，请将屏幕大小更改为大或大。

插图 large-screen.png 的说明
在终端窗口中，按 Ctrl+C，如果出现提示，输入 y 以退出 Oracle JET 工具批处理作业。
关闭浏览器窗口或选项卡。
已完成的具有响应设计功能的应用程序应类似于 jet_web_application_responsive_design_final.zip。

任务 5：（可选）从恢复的应用程序运行 Web 应用程序

如果要从提供的代码运行完成的 Oracle JET Web 应用程序，可以从下载的归档文件还原应用程序。要使用剥离和压缩的 Oracle JET 应用程序，必须在提取的应用程序中恢复项目依赖关系，包括 Oracle JET 工具以及所需的库和模块。

下载 jet_web_application_responsive_design_final.zip 文件并将已完成应用程序的内容提取到 jet_web_application_responsive_design_final 文件夹。
在终端窗口中，导航到 jet_web_application_responsive_design_final 文件夹并恢复 Oracle JET Web 应用程序。
```
$ ojet restore
```
等待确认。
```
$ Restore complete
```
应用程序已准备好运行。
在浏览器中运行 Web 应用程序和测试。
```
$ ojet serve
```
关闭显示正在运行的 Web 应用程序的浏览器窗口或选项卡。
在终端窗口中，按 Ctrl+C，如果出现提示，输入 y 以退出 Oracle JET 工具批处理作业。