当使用knockout添加项目时，修改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：

用于第一个分区：<div class="ui-block-a" />用于第二分区：<div class="ui-block-b" />用于第三分区：<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

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

Answer 1

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

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

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

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