處理 Oracle JET Web App 中的選擇事件

簡介

您可以在 Oracle JET Web 應用程式的 viewModel 中使用 Oracle JavaScript Extension Toolkit (Oracle JET) API，以建立回應 Oracle JET 清單檢視元件 selected 屬性變更監聽器的事件處理程式。當使用者選取或取消選取清單中的項目時，變更監聽器會觸發您的事件處理程式。您可以使用事件處理程式來植入 Oracle JET 資料提供者，並連結資料提供者以觀察檢視元件可使用的項目。事件處理程式也可以設定 Oracle JET If Link 元件用來在檢視中依條件呈現其巢狀 HTML 元素的布林變數。如果主要清單之 Oracle JET 清單檢視元件的 selected 屬性不是空的，則變數會設為 true，而檢視會呈現資料繫結的詳細資料清單。如果因為取消選取事件而使 selected 屬性空白，則該變數會設為 false，而檢視會在沒有資料繫結詳細資料清單的檢視中顯示容器。

目標

在本教學課程中，您將更新 Oracle JET Web 應用程式的使用者介面，以便顯示主要詳細資料。您會學習如何使用 Oracle JET 特性變更監聽器建立 JavaScript 事件處理程式。您也會瞭解如何使用 Oracle JET If Link 元件依條件顯示詳細資訊清單來處理清單選擇。

必要條件

設定讓開發環境使用 JavaScript 程式實際執行、Node.js 及最新 Oracle JET 版本命令行介面建立 Oracle JET App
在此學習路徑中完成上一個教學課程，因此您在 JET_Web_Application 資料夾中建立 Oracle JET Web 應用程式
已選擇性下載完成的應用程式 jet_web_application_masterdetail_final.zip

作業 1：設定檢視表中的選取行為

更新檢視以自訂「清單檢視」元件，以處理「活動」清單與「活動項目」清單中的資料列選擇。「Oracle JET 清單檢視」元件定義 first-selected-item 屬性，該元件會植入使用者列選擇的資料項目，且您可以使用雙向連結以觀察到。使用元件的 on-selection-changed 屬性，藉由連結您在 viewModel 中定義的事件監聽器，擷取和處理清單選擇 / 取消選取事件。

瀏覽至 JET_Web_Application/src/ts/views 目錄，然後在編輯器中開啟 dashboard.html 檔案。

在「活動」標題下方，尋找 oj-list-view 自訂 HTML 元素，其中 id="activitiesList"，然後在 gridlines.item 屬性之後新增選取行為屬性。

   
<h3 id="activitiesHeader">Activities</h3>
   <oj-list-view id="activitiesList" class="item-display" aria-labelledby="activitiesHeader"
     data="[[activityDataProvider]]" gridlines.item="visible" selection-mode="single" selected="{{selectedActivity}}"
     on-first-selected-item-changed="[[selectedActivityChanged]]" first-selected-item="{{firstSelectedActivity}}"
     scroll-policy="loadMoreOnScroll" scroll-policy-options.fetch-size="5">
     <template slot="itemTemplate">
. . .
   

在「活動項目」標題下方，尋找 oj-list-view 自訂 HTML 元素，其中 id="itemsList"，然後在 gridlines.item 屬性之後新增選取行為屬性。

   
<h3 id="itemsListHeader">Activity Items</h3>
     <oj-list-view id="itemsList" class="item-display" data="[[itemsDataProvider]]" aria-labelledby="itemsListHeader"
       gridlines.item="visible" selection-mode="single" selected="{{selectedItem}}"
       on-first-selected-item-changed="[[selectedItemChanged]]" first-selected-item="{{firstSelectedItem}}"
       scroll-policy="loadMoreOnScroll" scroll-policy-options.fetch-size="5">
       <template slot="itemTemplate">
. . .
   

儲存 dashboard.html 檔案。

您的檔案看起來應類似 event-task1-dashboard-html.txt。

工作 2：在 ViewModel 中建立事件處理程式

更新 viewModel 以新增「清單檢視」元件的事件處理程式，以回應「活動」清單與「活動項目」清單中的選取項目。「Oracle JET 清單檢視」元件會定義 selected 屬性，「Oracle JET 清單檢視 API」定義特性變更監聽器。使用者選取清單並變更 selected 屬性的值時，您的事件處理程式會設定 selectedActivity 和 selectedItem 可觀察項目。

瀏覽至 JET_Web_Application/src/ts/viewModels 目錄，然後在編輯器中開啟 dashboard.ts 檔案。

在 pieSeriesValue 可觀察定義下方，在 constructor() 之前，為「活動清單」選項與「活動項目」清單選項新增可觀察項目。

class DashboardViewModel {
   . . . 
   pieSeriesValue: ko.ObservableArray;
   // Observables for Activities
   selectedActivity = new ObservableKeySet();
   activitySelected = ko.observable(false);  // Controls display of Activity Items
   firstSelectedActivity = ko.observable();
   selectedActivityIds = ko.observable();

   // Observables for Activity Items
   itemSelected = ko.observable(false);
   selectedItem = ko.observable();
   firstSelectedItem = ko.observable();

   constructor() {
   . . .

在 dashboard.ts 檔案的頂端，從 ojs/ojknockout-keyset 模組匯入 ojListView 類別，以及從 ojs/ojlistview 模組匯入 ObservableKeySet 類別。

import * as ko from "knockout";
. . . 
import "ojs/ojavatar";
import { ObservableKeySet } from "ojs/ojknockout-keyset";
import { ojListView } from "ojs/ojlistview";

在 DashboardViewModel 類別之前，新增 ActivityItems 類型別名。

. . . 
type ActivityItems = {
   id: number;
   name: string;
   items: Array<Item>;
   short_desc: string;
   image: string;
};

class DashboardViewModel {
. . .

在 DashboardViewModel 類別 constructor() 方法宣告之後，新增含測試條件的 selectedActivityChanged 事件處理程式，以處理選擇和取消選取事件。

} // End of constructor function

selectedActivityChanged = (event: ojListView.firstSelectedItemChanged<ActivityItems["id"], ActivityItems>) => {
   /**
   *  If no items are selected then the firstSelectedItem property  returns an object 
   *  with both key and data properties set to null.
   */
   let itemContext = event.detail.value.data;

   if (itemContext != null) {    
      // If selection, populate and display list

   } else {
         // If deselection, hide list          
   }
};

在接下來的步驟中實作此事件處理程式。

在 selectedActivityChanged 事件處理程式的 if 敘述句中，使用 itemsArray 變數植入可觀察的 itemsDataProvider，然後針對選取事件將 activitySelected 和 itemSelected 選取狀態可觀察到 true。

selectedActivityChanged = (event: ojListView.firstSelectedItemChanged<ActivityItems["id"], ActivityItems>) => {
   /**
    *  If no items are selected, then this property firstSelectedItem 
    *  will return an object with both key and data properties set to null.
   */
   let itemContext = event.detail.value.data;

   if (itemContext != null) {    
      // If selection, populate and display list
      // Hide currently-selected activity item
      this.activitySelected(false);

      let itemsArray = itemContext.items;
      this.itemsDataProvider.data = itemsArray;
      // Set List View properties
      this.activitySelected(true);
      this.itemSelected(false);
      this.selectedItem();
      this.itemData();

   } else {
         // If deselection, hide list
   }
};

在 selectedActivityChanged 事件處理程式的 else 敘述句中，將取消選取事件的 activitySelected 和 itemSelected 選取狀態可觀察到 false。

selectedActivityChanged = (event: ojListView.firstSelectedItemChanged<ActivityItems["id"], ActivityItems>) => {
   /**
    *  If no items are selected then this property firstSelectedItem will return an 
    *  object with both key and data properties set to null.
   */

   let itemContext = event.detail.value.data;

   if (itemContext != null) {    
      . . .
   } 

   else {
      // If deselection, hide list
      this.activitySelected(false);
      this.itemSelected(false);
   }
};

在 selectedActivityChanged 事件處理程式之後，新增含有測試條件的 selectedItemChanged 事件處理程式，以處理選擇和取消選取事件。

selectedActivityChanged = (event: ojListView.firstSelectedItemChanged<ActivityItems["id"], ActivityItems>) => {
   . . .
};

/**
* Handle selection from Activity Items list
*/
selectedItemChanged = (event: ojListView.firstSelectedItemChanged<Item["id"], Item>) => {

   let isClicked = event.detail.value.data;

   if (isClicked != null) {

       // If selection, populate and display list
   }
   else {
   // If deselection, hide list
   }
};

在接下來的步驟中實作此事件處理程式。

在 selectedItemChanged 事件處理程式的 if 敘述句中，填入可觀察的 itemData，使用 pieSeries 陣列變數填入可觀測的 pieSeriesValue，然後為選取事件將可觀察到 true 的 itemSelected 選取狀態設為可見。

selectedItemChanged = (event: ojListView.firstSelectedItemChanged<Item["id"], Item>) => {

   let isClicked = event.detail.value.data;

   if (isClicked != null) {

      // If selection, populate and display list
      this.itemData(event.detail.value.data);

      // Create variable and get attributes of the items list to set pie chart values
      let pieSeries = [
      { name: "Quantity in Stock", items: [this.itemData().quantity_instock] },
      { name: "Quantity Shipped", items: [this.itemData().quantity_shipped] }
      ];
      // Update the pie chart with the data
      this.pieSeriesValue(pieSeries);

      this.itemSelected(true);

   }
   else {
   // If deselection, hide list

   }
};

在 selectedItemChanged 事件處理程式的 else 敘述句中，將可觀察到取消選取事件的 itemSelected 選取狀態設為 false。

selectedItemChanged = (event: ojListView.firstSelectedItemChanged<Item["id"], Item>) => {

   if (isClicked != null) {
   . . . 
   }
   else {
   // If deselection, hide list
   this.itemSelected(false);        
   }
};

儲存 dashboard.ts 檔案。

您的檔案看起來應類似 final-event-dashboard-ts.txt。

作業 3：條件化檢視表中的清單轉譯

使用「Oracle JET If 連結」元件更新檢視，以有條件呈現詳細資訊清單。「Oracle JET If Link」元件在其 test 屬性取得布林變數。在一個「如果連結」元件內，將「活動項目」容器以巢狀方式建立，然後在另一個「如果連結」元件中，以巢狀方式輸入「項目詳細資訊」容器。然後使用 If 連結元件測試可觀察 activitySelected 和 itemSelected 的狀態。測試條件為 true 時，If 連結元件的巢狀內容會呈現。如果可觀察為 true，則顯示資料繫結清單，如清單事件處理程式所設定。使用另一個「如果連結」元件來測試可觀察為 false，然後顯示含有指示使用者選取清單之訊息的容器。

瀏覽至 JET_Web_Application/src/ts/views 目錄，然後在編輯器中開啟 dashboard.html 檔案。
尋找 div 元素，其中 id="parentContainer2"。在上方新增 oj-bind-if 自訂 HTML 元素的開始標記，將 test 屬性設為可觀察 activitySelected 的狀態。
```
. . .
   </oj-list-view>
</div>
<oj-bind-if test="[[activitySelected()]]">
<div id="parentContainer2" class="oj-flex oj-flex-item oj-panel oj-bg-danger-30 oj-lg-padding-6x oj-md-8 oj-sm-12">
   <div id="activityItemsContainer" class="oj-flex-item oj-md-6 oj-sm-12">
   <h3 id="itemsListHeader">Activity Items</h3>
. . .
```
使用者從「活動」清單中選取活動時，「viewModel 活動已變更」事件處理程式會將 activitySelected 的值設為 true。在此情況下，已滿足 oj-bind-if 測試條件，應用程式會將「活動項目」容器轉譯為活動選項。可觀察特性的 () 表示法是「剔除」函數慣例，以取得可觀察的值，而不是取得可觀察物件的實例。
尋找 div 元素，其中 id="itemDetailsContainer" 與其上方新增 oj-bind-if 自訂 HTML 元素的開始標記，將 test 屬性設為 itemSelected 可觀察的狀態。
```
. . .
   </oj-list-view>
</div>
<oj-bind-if test="[[itemSelected()]]">
<div id="itemDetailsContainer" class="oj-flex-item oj-panel oj-bg-neutral-30 oj-md-6 oj-sm-12">
   <h3>Item Details</h3>
. . .     
```
使用者從「活動項目」清單中選取項目時，viewModel「變更的項目」事件處理程式會將 itemSelected 可觀察到 true。在此情況下，已滿足 oj-bind-if 測試條件，應用程式會轉譯選取活動項目的「項目詳細資訊」容器。
在 dashboard.html 檔案的底部計算兩個結束的 </div> 標記，然後新增結束的 </oj-bind-if> 標記以符合開頭的 <oj-bind-if test ="[[activitySelected()]]"> 標記。再計算一次結束的 </div> 標記，然後為開啟的 <oj-bind-if test ="[[itemSelected()]]"> 標記新增結束的 </oj-bind-if> 標記。
```
. . . 
            </oj-chart>
            </div>
         </div>
      </oj-bind-if>
      </div>
   </oj-bind-if>
   </div>
</div>
```
在您新增的結束 </oj-bind-if> 標記下方 (最接近檔案結尾)，插入包含 Oracle JET oj-flex-item oj-sm-6 彈性版面配置協助程式類別的 div 元素的 oj-bind-if test="[[!activitySelected()]]" 自訂 HTML 元素。
```
. . . 
            </oj-bind-if>
         </div>
      </oj-bind-if>
      <oj-bind-if test="[[!activitySelected()]]">
         <div class="oj-flex-item oj-sm-6">
         <p>Select an Activity to see Items</p>
         </div>
      </oj-bind-if>
   </div>
</div>
```
Oracle JET oj-sm-6 協助程式類別指定 Select an Activity to see Items 標題的容器佔用的六個容器資料欄，包含較小且較大的螢幕大小。

在使用者選取活動之前，activitySelected 可觀察值為 false。同樣地，如果使用者按 Ctrl 鍵並按一下已選取的活動，viewModel 就會將此事件視為取消選取，而「活動變更」事件處理程式會將 activitySelected 可觀察到 false。在這兩種情況下，oj-bind-if 測試條件均以布林值 false 條件滿足，而應用程式會轉譯 Select an Activity to see Items 標題。
在檔案中的第一個結束 </oj-bind-if> 標記下方，新增 oj-bind-if test ="[[!itemSelected()]]" 自訂 HTML 元素，其中包含 Oracle JET oj-flex-item oj-sm-12 oj-md-6 flex 版面配置協助程式類別的 div 元素。
```
. . .
                  </oj-chart>
               </div>
            </div>
         </oj-bind-if>
         <oj-bind-if test="[[!itemSelected()]]">
            <div class="oj-flex-item oj-sm-12 oj-md-6">
               <p>Select an Item to see details</p>
            </div>
         </oj-bind-if>
         </div>
      </oj-bind-if>
      <oj-bind-if test="[[!activitySelected()]]">
         <div class="oj-flex-item oj-sm-6">
         <p>Select an Activity to see Items</p>
         </div>
      </oj-bind-if>
   </div>
</div>
```
Oracle JET oj-sm-12 和 oj-md-6 協助程式類別指定 Select an Item 的容器，查看詳細資訊標題所佔的六個容器資料欄，用於中和較大螢幕大小，或者使用 12 個容器資料欄作為小螢幕大小。

使用者選取活動項目之前，itemSelected 可觀察的值是 false。同樣地，如果使用者按 Ctrl 鍵並按一下已選取的活動項目，viewModel 就會將此事件視為取消選取，而「項目變更」事件處理程式會將 itemSelected 可觀察到 false。在這兩種情況下，oj-bind-if 測試條件均以布林值 false 條件滿足，而應用程式會轉譯 Select an Item to see details 標題。
儲存 dashboard.html 檔案。

您的檔案看起來應類似 final-event-dashboard-html.txt。

作業 4：測試主要與明細清單

在終端機視窗中，變更為 JET_Web_Application 目錄，然後執行應用程式。
```
$ ojet serve
```
在 Web 瀏覽器中，按一下應用程式中的棒球活動。

活動清單選取會觸發 selectedActivityChanged 事件處理程式。所選活動的活動項目容器會轉譯。

master_detail_list.png 圖解的描述
在活動項目清單中，按一下 SureCatch Baseball Glove。

活動項目清單選取會觸發 selectedItemChanged 事件處理程式。應用程式會呈現所選項目的項目詳細資訊容器。

master_detail_item.png 圖解描述
在活動項目清單中，按 Ctrl 並按一下 SureCatch Baseball Glove 來取消選取。

活動項目清單取消選取會觸發 selectedItemChanged 事件處理程式。項目詳細資訊容器會隱藏。

master_detail_list.png 圖解的描述
調整瀏覽器大小，或按 Ctrl+Shift+I 以顯示 Chrome DevTools 並從螢幕大小模擬器中選取較小的螢幕大小，例如 Pixel 5。

容器是根據螢幕大小來排列。

resized_master_detail_list.png 圖解描述
關閉顯示您執行中 Web App 的瀏覽器視窗或頁籤。
在終端機視窗中，按 Ctrl+C，如果出現提示，請輸入 y 以結束 Oracle JET 工具批次工作。

作業 5：(選擇性) 從回復的應用程式執行 Web 應用程式

如果您要從提供的程式碼執行完成的 Oracle JET Web 應用程式，可以從下載的存檔檔案還原應用程式。若要使用「擷取和壓縮」的 Oracle JET 應用程式，您必須在擷取的應用程式內回復專案相依性，包括 Oracle JET 工具和必要的程式庫和模組。

下載 jet_web_application_masterdetail_final.zip 檔案，並將已完成的應用程式內容解壓縮至 jet_web_application_masterdetail_final 資料夾。
在終端機視窗中，瀏覽至 jet_web_application_masterdetail_final 資料夾並回復 Oracle JET Web 應用程式。
```
$ ojet restore
```
等待確認。
```
. . .
Success: Restore complete
```
應用程式已可執行。
在瀏覽器中執行 Web 應用程式並進行測試。
```
$ ojet serve
```
關閉顯示您執行中 Web App 的瀏覽器視窗或頁籤。
在終端機視窗中，按 Ctrl+C，如果出現提示，請輸入 y 以結束 Oracle JET 工具批次工作。

其他學習資源

探索 docs.oracle.com/learn 上的其他實驗室，或是存取更多免費學習內容至 Oracle Learning YouTube 通道。此外，瀏覽 education.oracle.com/learning-explorer 以成為 Oracle Learning Explorer。

如需產品文件，請瀏覽 Oracle Help Center。

標題與版權資訊

Handle selection events in an Oracle JET web app

F53158-01

February 2022