WinJS.UI.ListView：綁定到'-ms-grid-column'和'-ms-grid-row'

我創建了一個我想綁定到WinJS.UI.ListView的項目列表。該項目創建如下：WinJS.UI.ListView：綁定到'-ms-grid-column'和'-ms-grid-row'

var cells = []; 

for (var i = 0; i < 2; i++) { 
    for (var j = 0; j < 2; j++) { 
     var cell = { 
      location: { x: i, y: j } 
     }; 

     cells.push(cell); 
    } 
}

這個列表綁定到WinJS.UI.ListView

<div id="itemTemplate" data-win-control="WinJS.Binding.Template"> 
    <div style="width: 150px; height: 150px; margin: 10px;" data-win-bind="-ms-grid-column: location.y; -ms-grid-row: location.x "> 
     <h2 data-win-bind="innerText: location.x"></h2> 
     , 
     <h2 data-win-bind="innerText: location.y"></h2> 
    </div> 
</div> 

<div data-win-control="WinJS.UI.ListView" data-win-options="{ 
     itemDataSource : Data.itemList.dataSource, 
     itemTemplate: select('#itemTemplate'), 
     layout: {type: WinJS.UI.GridLayout} }" 
    style="width: 100%; height: 100%"> 
</div>

ListView控件的佈局設置「WinJS.UI.GridLayout」所以我希望將'-ms-grid-column'和'-ms-grid-row'樣式屬性綁定到itemTemplate中位置對象的X和Y屬性。將項綁定到列表就像魅力一樣，但綁定列和行屬性會引發異常。

這裏有什麼問題？任何人都可以指出我的正確方向嗎？

來源

2013-06-30 Piels

-ms-grid-column和-ms-grid-row不屬於div的屬性，並且data-win-bind不會綁定CSS屬性 - 它綁定HTML屬性。你可以改爲嘗試像：

<div data-win-bind="style: location SomeLocationToStyleConverter">

你必須建立一個初始化或轉換器（在這種情況下命名爲SomeLocationToStyleConverter），可以採取複雜的位置對象，並返回樣式屬性的整個價值

來源

2013-07-01 00:40:52

謝謝。但在[快速入門：綁定數據和樣式（使用JavaScript和HTML的Windows應用商店應用）]示例中，http://msdn.microsoft.com/en-us/library/windows/apps/hh700358.aspx它們綁定到樣式對象的背景屬性。差別是什麼？ – Piels

如果你可以用'myDiv.style.ms_grid_row'（我不知道它是否存在）來設置JavaScript的值，那麼你可以在綁定參數中指定style.ms_grid_row。這將適用於您提到的背景屬性等常見樣式，但我不知道網格佈局屬性是否可用。如果您發現它們，請在此處添加該評論。 –

WinJS.UI.ListView：綁定到'-ms-grid-column'和'-ms-grid-row'

回答

相關問題