Question

我有一个表格显示Knockout observableArray中的一些信息，我使用text: $index() + 1的数据绑定来显示每个项目在数组中的位置。现在，我希望能够跳过项目的位置，如果项目的值为true，则将其设为空白。因此，最终结果将显示正常的1到x索引，但是对于具有设置为true的特定值的每个项目，则不会显示任何索引，并且索引计数将在此之后恢复项目，好像该项目根本没有包含在索引计数中。

我做了simple jsFiddle来说明问题。

有关最佳方法的任何想法吗？

Answer 1

只需在td数据绑定中使用条件运算符，并显示或清空字符串或索引：

<table data-bind="foreach: people">
    <tr>
        <td data-bind="text: isresting ? '' : $index() + 1"></td>
        <td data-bind="text: name"></td>  
        <td data-bind="text: isresting"></td>
    </tr>   
</table>

Demo

<强>更新

我已经更新了我的实现，并添加了一个正确计算索引的函数：

HTML：

<table data-bind="foreach: people">
    <tr>
        <td data-bind="text: $parent.getIndexForMan($data)"></td>
        <td data-bind="text: name"></td>  
        <td data-bind="text: isresting"></td>
    </tr>   
</table>

视图模型：

function ViewModel() {
    var self = this;
    self.people = ko.observableArray();
    self.getIndexForMan = function(man) {
        if (man.isresting) {
            return null;
        }        
        var index = 1;
        var rawPeople = self.people();
        for (var i = 0; i < rawPeople.length; i++) {
            if (rawPeople[i] == man) {
                break;
            }
            if (!rawPeople[i].isresting) {
                index++;
            }
        }
        return index;
    }
};

var model = new ViewModel();
model.people(data);
ko.applyBindings(model);

Demo2

Answer 2

以下是使用子ViewModel的示例，我在其中切换索引的可见性

http://jsfiddle.net/barryman9000/wx2se/2/

<table data-bind="foreach: PeopleMap">
    <tr>
        <td>
            <span data-bind="text: PersonIndex, visible: !IsResting()"></span>
        </td>
        <td data-bind="text: Name"></td>
        <td data-bind="text: IsResting"></td>
    </tr>
</table>


var ViewModel = function (theData) {
    var _self = this;
    var personCount = 0;
    _self.PeopleMap = ko.observableArray(
    ko.utils.arrayMap(theData, function (item) {
        if(!item.isresting){
            personCount++;
        }
        return new PeopleViewModel(item, personCount);
    }));
};

var PeopleViewModel = function (data, personCount) {
    var _self = this;
    _self.Name = ko.observable(data.name);
    _self.IsResting = ko.observable(data.isresting);
    _self.PersonIndex = ko.observable(personCount);
};
ko.applyBindings(new ViewModel(data));

在Knockout Observable Array中跳过$ index（）

2 个答案: