2014-03-26 109 views
1

我有一個表顯示來自Knockout observableArray的一些信息,我使用數據綁定的text: $index() + 1來顯示數組中的每個項目的位置。現在,如果項目的值爲true,我希望能夠跳過項目的位置並將其設爲空白。因此,最終結果將是正常顯示的1到x索引,但是對於每個具有特定值的項目設置爲true,則不會顯示索引,並且該索引計數將在該項目之後拾取,就好像該項目未被包括一樣在指數計數。

我做了一個simple jsFiddle來說明問題。

任何想法的最佳方法來解決這個問題?

回答

2

只需使用條件運算符中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

+0

太棒了。您的更新版本效果很好 – rwisch45

0

下面是一個使用子視圖模型,在那裏我切換指數的知名度爲例

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));