javascript - 使用敲除添加项目时，在 jquery 移动网格中修改 div 的类

Question

我想创建一个 3x3 网格，其中包含使用敲除绑定加载的图像

<fieldset class="ui-grid-b" data-bind="foreach: Icons">
 <div>
    <img alt="" src="../res/placeholder.png" style="width: 80px; height: 80px" />
 </div>
</fieldset>

Images 属性来自视图模型，它通过 ajax 调用异步加载。

我需要像这样为每个图像设置 div：

第 1 格：<div class="ui-block-a" /> 第 2 格：<div class="ui-block-b" /> 第 3 格：<div class="ui-block-c" /> 第 4 格：<div class="ui-block-a" /> 第 5 格：<div class="ui-block-b" /> 第 6 格：<div class="ui-block-c" /> ...

所以类名是“ui-block-”+ div_index % 3

问题是我不知道如何设置类名。我尝试使用计算的 observable 但我无法获取实际对象（图标模型）以便能够返回 Icons.IndexOf(icon) % 3

Answer 1

在 a 中使用 Knockout 2.1，foreach您可以访问该$index变量。

<div data-bind="attr: {'class': $root.indexLetter($index())}">

在您的 ViewModel 中创建一个方法，如下所示：

viewModel.indexLetter = function(index) {
    var abc = 'abc';
    return 'ui-block-' + abc.charAt(index % 3);
}