Question

我正在创建一个要绑定到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属性。将项绑定到列表就像魅力一样，但绑定column和row属性会引发异常。

这里有什么问题？任何人都可以指出正确的方向吗？

Answer 1

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

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

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

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

1 个答案: