Numer wiersza tabeli przy wiązaniu knockout foreach

Question

Mam tabelę z nagłówkami (#, nazwa użytkownika, nazwisko użytkownika) i wykonuję pętlę foreach do nokautu, aby dodać wiersze, gdy użytkownik wybierze nazwę użytkownika z listy wyboru. Oto moja 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> 

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

Problem pojawia się, gdy użytkownik wybierze Użytkownicy 1 i 3 indeksie $() + 1 nie pracować dla numeru wiersza.

Potrzebuję sposobu, aby dynamicznie ustawić numer wiersza.

Z góry dziękuję.

Answer 1

Utworzę obliczone obserwowalne miejsce, w którym wykonuję filtrowanie. Następnie $index() zapewni prawidłowe rownumbers:

więc dodać nową właściwość selectedUsers do swojej myViewModel:

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

następnie wiążą się z nim w tabeli:

<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.