Tablo satır numarası, ciltleme sonlandırıldığında foreach

Question

Başlıklı bir tablo var (#, Kullanıcı adı, Kullanıcı soyadı) ve kullanıcı bir onay kutusu listesinden kullanıcı adını seçtiğinde satır eklemek için bir nakavt foreach döngüsü yapıyor. İşte JS

var myViewModel = { 
    users: ko.observableArray([{ 
     username: 'Name 1', 
     usersurname: 'Surname 1', 
     userselected: ko.observable(false) 
    }, { 
     username: 'Name 2', 
     usersurname: 'Surname 2', 
     userselected: ko.observable(false) 
    }, { 
     username: 'Name 3', 
     usersurname: 'Surname 3', 
     userselected: ko.observable(false) 
    }]) 
}; 

$(document).ready(function() { 
    //Bind View model 
    ko.applyBindings(myViewModel); 
}); 

sorun kullanıcı kullanıcıları 1 ve 3 $ indeksi (seçtiğinde geliyor) + 1 yapar benim Fiddle.

HTML

<div> 
    <table class="table table-bordered"> 
     <thead> 
      <th>#</th> 
      <th>User Name</th> 
      <th>User Surname</th> 
     </thead> 
     <tbody data-bind="foreach: users"> 
      <tr data-bind="if: userselected"> 
       <!-- The table row number --> 
       <td data-bind="text: $index() + 1"></td> 
       <td data-bind="text: username"></td> 
       <td data-bind="text: usersurname"></td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

olduğunu satır numarası için çalışmak.

Satır numarasını dinamik olarak ayarlamanın bir yoluna ihtiyacım var.

Şimdiden teşekkürler.

Answer 1

Filtrelemeyi yaptığım yerde hesaplanabilir bir gözlemlenebilir. Sonra $index() doğru rownumbers sağlayacaktır:

Yani senin myViewModel için yeni bir özellik selectedUsers ekleyin:

myViewModel.selectedUsers = ko.computed(function() { 
    return ko.utils.arrayFilter(myViewModel.users(), function (item) { 
     return item.userselected(); 
    }); 
}); 

Ardından tablodaki kendisine bağlamak:

<tbody data-bind="foreach: selectedUsers"> 
     <tr> 
      <!-- The table row number --> 
      <td data-bind="text: $index() + 1"></td> 
      <td data-bind="text: username"></td> 
      <td data-bind="text: usersurname"></td> 
     </tr> 
</tbody> 

Demo JSFiddle.