Daten binden eine Komponente in einer Oracle JET-Webanwendung

Einführung

In diesem Tutorial wird gezeigt, wie Sie ein lokales JSON-Dokument in der Webanwendung Oracle JavaScript Extension Toolkit (Oracle JET) verwenden.

Oracle JET ist ein Entwicklungstoolkit, das eine Reihe von Datenproviderklassen zur Verwaltung von Daten aus verschiedenen Quellen bereitstellt. In viewModel füllen Sie eine Instanz von MutableArrayDataProvider mit den Daten auf, die Sie aus einer JSON-Datei lesen. Anschließend binden Sie die Instanz MutableArrayDataProvider an benutzerdefinierte Oracle JET-HTML-Elemente in der Ansicht.

Ziele

Nach Abschluss dieses Tutorials erfahren Sie, wie Sie Daten aus einem JSON-Dokument in einen Datenprovider lesen, eine Oracle JET-Listenansichtskomponente hinzufügen und die Komponente an die JSON-Datenobjekte binden.

Voraussetzungen

Eine Entwicklungsumgebung, die zum Erstellen von Oracle JET-Apps eingerichtet wurde und die JavaScript-Laufzeit, Node.js sowie die aktuellste Befehlszeilenschnittstelle des Oracle JET-Release installiert ist
Abschluss der vorherigen Tutorials in diesem Lernpfad, sodass Sie den Ordner JET_Web_Application erstellt haben
store_data.json wurde in das Verzeichnis JET_Web_Application/src/ts/ heruntergeladen.

Aufgabe 1: JSON-Dokument herunterladen und Daten prüfen

Laden Sie die Datei store_data.json in das Verzeichnis JET_Web_Application/src/ts/ herunter.
Öffnen Sie die Datei store_data.json in Ihrem Webbrowser, und zeigen Sie die Datenstruktur an. Die Datei store_data.json enthält eine Liste der Aktivitätsobjekte und deren Eigenschaften. Jede Aktivität enthält ein Array von Elementen mit ihren eigenen Eigenschaften.

Aufgabe 2: Datenprovider in ViewModel auffüllen

Sie übergeben Daten aus der JSON-Datei in ein Oracle JET-Objekt ojmutablearraydataprovider.

Navigieren Sie zum Verzeichnis JET_Web_Application/src/ts/viewModels, und öffnen Sie die Datei dashboard.ts in einem Editor.

Importieren Sie die Daten aus der Datei store_data.json, sodass sie in der Datei ViewModel verfügbar sind.

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

Falls nicht vorhanden, importieren Sie das ojmutablearraydataprovider-Modul, das Sie zum Speichern der JSON-Daten verwenden.
```
import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");
```
Definieren Sie vor der Klasse DashboardViewModel() einen Typalias Activity, der das Feld id des Typs number enthält.
```
...
type Activity = {
  id: number;
}

class DashboardViewModel {
```

Fügen Sie in der Klasse DashboardViewModel() einen Typ für activityDataProvider hinzu, den Sie im nächsten Schritt erstellen.

class DashboardViewModel {

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

Erstellen Sie in der Methode constructror der Klasse DashboardViewModel() eine Instanz von MutableArrayDataProvider (activityDataProvider), und verwenden Sie die Methode JSON.parse, um die JSON-Daten einzulesen.

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

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

Oracle JET List View-Komponentenmodul importieren

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

Das Modul ojlistview unterstützt die Ansicht im nächsten Abschnitt dieses Tutorials.

Speichern Sie die Datei dashboard.ts. Die Datei dashboard.ts sollte in etwa final-data-bind-dashboard-ts.txt aussehen.

Aufgabe 3: Daten binden die Listenansichtskomponente in der Ansicht

Das Element oj-list-view ist ein benutzerdefiniertes Oracle JET-HTML-Element mit interaktiven Features, die eine erweiterte Version einer HTML-Liste sind. Sie geben die Daten an die Liste an, indem Sie die in viewModel aufgefüllte Variable activityDataProvider an das Attribut data der Listenansicht binden.

Navigieren Sie zum Verzeichnis JET_Web_Application/src/ts/views, und öffnen Sie die Datei dashboard.html in einem Editor.

Fügen Sie in der Datei dashboard.html ein div-Element mit dem id-Attributwert activitiesContainer über dem itemDetailsContainer div-Element hinzu, das die Oracle JET Select Single- und Chart-Komponenten enthält.

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

Fügen Sie im Element activitiesContainer div ein oj-list-view-Element mit einem data-Attribut hinzu, das ein unidirektionales Binding zum Abrufen der Listendaten verwendet.
```
<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>
```
Außerdem geben Sie den Wert visible für das Attribut gridlines an, sodass eine Rasterlinie zwischen den Elementen in der Liste und dem Attribut aria-labelledby als Best Practice für die Barrierefreiheit angezeigt wird.

Fügen Sie im erstellten oj-list-view-Element ein HTML-template-Element mit einem slot-Attribut hinzu, um jedes Element in der Liste wiederzugeben.

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

Fügen Sie im Vorlagenelement ein weiteres div-Element hinzu, das ein benutzerdefiniertes oj-bind-text-HTML-Element mit einem value-Attribut enthält, das ein unidirektionales Binding verwendet, um die Listendaten aus dem aktuellen Datenobjekt abzurufen.

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

Fügen Sie ein HTML-Element h3 hinzu, um einen Header für die Aktivitätsliste anzugeben.

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

Fügen Sie in itemDetailsContainer div ein h3-Element und ein oj-label-Element hinzu, um einen Header für das Diagramm bereitzustellen.

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

Speichern Sie die Datei dashboard.html. Die Datei dashboard.html sollte in etwa final-data-bind-dashboard-html.txt aussehen.

Aufgabe 4: Webanwendung ausführen

Wechseln Sie im Terminalfenster in das Verzeichnis JET_Web_Application, und führen Sie die App aus.
```
$ ojet serve
```
Im Browser wird die Liste der Aktivitäten angezeigt, die auf der Registerkarte Dashboard der Webanwendung angezeigt werden.

Beschreibung der Abbildung output.png
Schließen Sie das Browserfenster oder die Registerkarte, auf der Ihre aktive Webanwendung angezeigt wird.
Drücken Sie im Terminalfenster auf Ctrl+C, und geben Sie bei entsprechender Aufforderung y ein, um den Oracle JET-Tooling-Batchjob zu beenden.
Lassen Sie das Terminalfenster für Ihr nächstes Tutorial geöffnet.

Weitere Lernressourcen

Sehen Sie sich andere Übungen zu docs.oracle.com/learn an, oder greifen Sie auf weitere Inhalte für kostenloses Lernen im Oracle Learning YouTube-Kanal zu. Außerdem besuchen Sie education.oracle.com/learning-explorer, um Oracle Learning Explorer zu werden.

Produktdokumentation finden Sie im Oracle Help Center.

Titel und Copyright-Informationen

Data bind a component in an Oracle JET web app

F53089-01

February 2022