程式師世界 >> 編程語言 >> .NET網頁編程 >> ASP.NET >> 關於ASP.NET >> WinJS ListView控件詳解

WinJS ListView控件詳解

編輯：關於ASP.NET

您有數據，很多數據。您需要以如下方式呈現這些數據，即用戶可以毫不費力地在應用程序中訪問和理解數據。應用程序以新聞文章、配方、賽事比分、財務圖表等形式公開其數據，所有數據都呈現在屏幕上大小不同的區域中，盡量吸引使用者的注意。由於小型到中型數據網格便於人們使用、搜索和篩選，現在市場上眾多應用程序大都以較為合理的網格或列表格式呈現數據。無論是企業應用程序、個人應用程序還是其他應用程序，網格都是支撐數據快速浏覽的基本框架。

在 Windows 應用商店的應用中，通過使用 ListView 控件可以設置這種數據呈現結構。如果您是開發 Windows 應用商店的應用的新手，可以閱讀我 2013 年 2 月的文章“使用 HTML5 和 JavaScript 創建 Windows 應用商店的應用”(msdn.microsoft.com/magazine/jj891058) 和我 2013 年 7 月的文章 “精通用 JavaScript 構建的 Windows 應用商店應用中的控件和設置 ”(msdn.microsoft.com/magazine/dn296546)，了解相關信息。
ListView 控件基礎知識

HTML 和 XAML 中都提供了 ListView 控件，該控件以網格或列表格式呈現數據。在 Windows JavaScript 庫 (WinJS) 應用程序（本文的重點）中，通過將主機 <div> 元素上的 data-win-control 屬性設置為 “WinJS.UI.ListView”，可以使用 ListView 控件，如下所示：

承載 ListView 的 <div> 不包含任何子元素。不過，它在一個名為 data-win-options 的屬性中包含基本配置信息。通過 data-win-options，可以使用聲明性語法在 HTML 頁面中設置 ListView 控件的任何屬性。要正確使用 ListView，需要向它應用以下特征：

ListView 的組和項模板。

ListView 的組和項數據源。

ListView 是使用網格還是使用列表布局（默認為網格）。

此外，還應指定 ListView 的項選擇模式是單個還是多個（默認為多個）。在 data-win-options 屬性中設置了布局和 selectionMode 屬性的基本 ListView 如下所示：

<div id="listView" data-win-control= "WinJS.UI.ListView" data-win-options=

"{ selectionMode: 'single', layout : {type: WinJS.UI.GridLayout} }" ></div>

盡管上面的代碼定義了一個 ListView，但是該 ListView 光靠自身是無法工作的。它需要借助於 WinJS.Binding.List 對象。 List 對象將填充有對象的數組綁定到項和組模板中定義的 HTML 元素。這意味著 List 對象定義要顯示的數據，模板定義數據的顯示方式。
創建 ListView 模板

為 ListView 設置 <div> 後，接下來可以為其創建模板。 ListView 依賴於 HTML 模板來顯示用戶可讀的數據。幸運的是，Grid、Split 和 Hub （Windows 8.1 中提供了 Hub）Windows 應用商店應用程序模板包含以網格或列表格式呈現數據所需的一切，包括示例數據、預定義 ListView 控件和預定義 CSS 類。您可以修改這些模板，也可以根據需要創建自己的模板。但是請注意，如果您創建自己的模板，應遵循新型 UI 設計原則，按 bit.ly/IkosnL 的 Windows 應用商店的應用開發中心所述實現 Windows 8 輪廓。在您使用內置 Visual Studio 模板時，這一工作已為您完成。

ListView 需要一個項模板，如果要對數據分組，則還需要一個頁眉模板。項和組模板的父元素是 data-win-control 屬性已設置為 “WinJS.Binding.Template”的簡單 <div> 元素。

頁眉模板應包含每個組的鏈接，用戶單擊這些鏈接，則會轉到列出屬於該組的項的頁面。下面是十分常見的母版/詳細信息導航模式的示例。在圖 1 中，分類為“headertemplate”的 <div> 包含一個與該組的鍵綁定的 <button> 元素。當用戶點擊或單擊該按鈕時，會轉到一個顯示該組成員的頁面。

圖 1 ListView 控件的頁眉和項模板

         <div class="headertemplate" data-win-

control="WinJS.Binding.Template">   
  <button class="group-header win-type-x-large win-type-

interactive"
     data-win-bind="groupKey: key"
     onclick   
="Application.   
          navigator.pageControl   
    .   
          navigateToGroup(event.srcElement.groupKey)"   
        
     role="link" tabindex="-1"
     type="button">   
    <span class="group-title win-type-ellipsis" data-win-

bind=   
      "textContent: title"></span>   
    <span class="group-chevron"></span>   
  </button>   
</div>   
<div class="itemtemplate" data-win-

control="WinJS.Binding.Template">   
  <div class="item">   
    <img class="item-image" src="#" data-win-

bind=   
      "src: backgroundImage; alt: title" />   
      <div class="item-overlay">   
        <h4 class="item-title" data-win-

bind="textContent: title"></h4>   
        <h6 class="item-subtitle win-type-ellipsis" data-

win-bind=   
          "textContent: subtitle"></h6>   
      </div>   
  </div>   
</div>