WinJS.UI.ListView：绑定到 '-ms-grid-column' 和 -'ms-grid-row'答案

【问题标题】：WinJS.UI.ListView: Binding to the '-ms-grid-column' and -'ms-grid-row'WinJS.UI.ListView：绑定到 '-ms-grid-column' 和 -'ms-grid-row'
【发布时间】：2013-06-27 18:11:27
【问题描述】：

我正在创建要绑定到 WinJS.UI.ListView 的项目列表。项目创建如下：

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 属性。将项目绑定到列表就像一个魅力，但绑定列和行属性会引发异常。

这里有什么问题？谁能指出我正确的方向？

【问题讨论】：

标签： listview binding winjs

【解决方案1】：

-ms-grid-column 和-ms-grid-row 不是div 的属性，data-win-bind 不会绑定 CSS 属性——它会绑定 HTML 属性。您可以尝试类似的方法：

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

您必须构建一个初始化程序或转换器（在本例中名为 SomeLocationToStyleConverter），它可以获取复杂的位置对象并返回样式属性的整个值

【讨论】：

谢谢。但在 [快速入门：绑定数据和样式（使用 JavaScript 和 HTML 的 Windows 应用商店应用程序）]msdn.microsoft.com/en-us/library/windows/apps/hh700358.aspx 的示例中，它们绑定到样式对象的背景属性。有区别吗？
如果你可以在 JavaScript 中设置类似 myDiv.style.ms_grid_row 的值（我不知道它是否存在），那么你可以在绑定参数中指定 style.ms_grid_row。这适用于您提到的背景属性等常见样式，但我不知道网格布局属性是否可以从那里获得。如果您发现它们是，请在此处添加该评论。