WinJS 中继器和 ms-grid：使用 JavaScript 添加 ms-grid-row 值

Question

我有一系列显示为-ms-grid 的 div。这些是使用WinJS.UI.Repeater 对象输出的。

我需要为当前迭代动态分配-ms-grid-row 值。

我该怎么做呢？

中继器

<div data-win-control="WinJS.UI.Repeater" data-win-options="{template: select('.template')}">
</div>

中继器模板

<div class="template" data-win-control="WinJS.Binding.Template">
    <div class="col1" style="-ms-grid-row:"></div>
    <div class="col2" style="-ms-grid-row:"></div>
    <div class="col3" style="-ms-grid-row:"></div>
    <div class="col4" style="-ms-grid-row:"></div>
</div>

CSS

.grid {
    display: -ms-grid;
    -ms-grid-columns: (1fr)[4];
    -ms-grid-rows: (auto)[1000];
}
.grid .col1 {
    -ms-grid-column: 1;
}
.grid .col2 {
    -ms-grid-column: 2;    
}
.grid .col3 {
    -ms-grid-column: 3;    
}
.grid .col4 {
    -ms-grid-column: 4;    
}

因为最多可以有 1000 行，所以我需要像这样内联分配样式：

渲染标记

<div class="col1" style="-ms-grid-row: 1">test</div>
<div class="col2" style="-ms-grid-row: 1">test</div>
<div class="col3" style="-ms-grid-row: 1">test</div>
<div class="col4" style="-ms-grid-row: 1">test</div>

<div class="col1" style="-ms-grid-row: 2">test</div>
<div class="col2" style="-ms-grid-row: 2">test</div>
<div class="col3" style="-ms-grid-row: 2">test</div>
<div class="col4" style="-ms-grid-row: 2">test</div>

但我不知道如何在中继器中执行此操作？

非常感谢

克里斯

Answer 1

您可以尝试使用此处解释的转换器功能：

http://msdn.microsoft.com/en-us/library/windows/apps/br229809.aspx

例如，您可以将函数分配给跨度的颜色并在函数中计算该颜色：

<span id="loginName" 
    data-win-bind="innerText: name; style.color: userType LoginData.userTypeToColor">
</span>
...

WinJS.Binding.processAll(document.getElementById("loginDisplay"), LoginData.login);

WinJS.Namespace.define("LoginData", {
    //Data Object
    login : { name: "myname", id: "12345678", userType: "admin" },

    //Converter function
    userTypeToColor: WinJS.Binding.converter(function (type) {
        return type == "admin" ? "Green" : "Red";
    })
});

我没有使用-ms-grid-row 属性测试此代码，但值得一试。