WinJS在表格中呈現listView

Question

我正在研究HTML/JS Win8商店應用程序。我想在表中呈現ListView。我將如何實現這一目標？

現在我有類似的東西：

 <table id="products"> 
      <tbody> 
       <tr> 
        <th>Name</th> 
        <th>Description</th> 
       </tr> 
       <tr data-win-control="WinJS.Binding.Template" id="productsRowTemplate"> 
        <td data-win-bind="textContent: name"></td> 
        <td data-win-bind="textContent: description"></td> 
       </tr> 
      </tbody> 
     </table> 

     <div id="productsListView" 
      data-win-control="WinJS.UI.ListView" 
      data-win-bind="winControl.itemDataSource: products.dataSource;" 
      data-win-options="{ 
      itemTemplate: select('#productsRowTemplate'), 
      layout: { type: WinJS.UI.ListLayout } 
      }"> 
     </div> 

然而，結果是不是我所期望的一切： http://postimg.org/image/4z39tvu9v/

我想實現類似這樣的效果（我用造型從我的觀點來看）： http://www.w3schools.com/css/tryit.asp?filename=trycss_table_fancy

我使用listView的原因是我使用ViewModels通過屬性公開集合 - 我只是想要t o將數據綁定到視圖並使用特定模板顯示。我肯定不想從後面的視圖代碼中動態創建表。

Answer 1

如果你的目標是渲染一個表，ListView不是你想要的。關鍵是要將收集的想法 - 您的數據源 - 與您用來呈現它的控件分開。這就是爲什麼有一個WinJS.Binding.List集合類和一個WinJS.UI.ListView控件作爲單獨的實體。

表格是呈現集合的一種方式;一個ListView是另一個。因此，試圖將兩者結合起來並不合情理。在您的標記中，模板元素實際上將從DOM中移除，而不是在表格中呈現。 ListView將嘗試使用該模板進行自我渲染，但由於它會在其自己的div內生成<tr>和<td>元素（在<表>之外），所以它不會真正起作用。也就是說，模板獲取爲數據源中的每個項目呈現爲聲明ListView的div的子項，而不是聲明模板的位置。

雖然您可以將ListView聲明爲表的子表，但它不會在那裏工作，因爲ListView會在聲明它的元素下面創建深度div結構。

因此爲此計數ListView。你想要的是一個簡單的自定義控件，它可以接受一個WinJS.Binding.List並將該模板作爲該控件的直接子對象。在Windows 8.1 Preview中，有一個名爲Repeater的新控件用於此確切目的，HTML Repeater control sample在<表>的上下文中進行了演示。請注意，您需要爲標題使用<thead>，並在<tbody>上聲明控件，以便它可以呈現具有<tr>作爲根元素的模板的副本。

如果你的目標是Windows 8，你當然不會有Repeater，但是創建你自己的一個並不複雜（如果你願意，可以從Win8.1 Repeater源中借用）。用WinJS.Class.define定義一個構造函數，並確保你有可以通過聲明指定數據源和模板的選項。該模板將包含您的data-win-bind屬性。在控件的構造函數中，遍歷Binding.List，爲列表中的每個項目渲染模板的副本。然後用該項目的根元素和數據源中的項目調用WinJS.Binding.processAll，它將設置您想要的數據綁定。

您將再次在tbody元素上聲明此控件，以便在正確的位置創建tr子項。要使用中繼器例子（它使用內聯模板）：

<table class="table"> 
    <thead class="table-header"><tr><td>Id</td><td>Description</td></tr></thead> 
    <tbody class="table-body" 
     data-win-control="WinJS.UI.Repeater" data-win-options="{data: Data.items}"> 
     <tr class="table-body-row"> 
      <td data-win-bind="textContent: id"></td> 
      <td data-win-bind="textContent: description"></td> 
     </tr> 
    </tbody> 
</table> 

你到底是動態創建表，但它封裝在控制，因此您可以設置數據綁定聲明的關係。