Numero riga tabella per vincolo foreach knockout

Question

Ho una tabella con intestazioni (#, nome utente, cognome utente) e sta eseguendo un ciclo foreach ad eliminazione diretta per aggiungere le righe quando l'utente seleziona il nome utente da un elenco di caselle di controllo. Ecco il mio 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); 
}); 

Il problema arriva quando l'utente seleziona gli utenti 1 e 3 del $ index() + 1 non lavorare per il numero di riga.

Ho bisogno di un modo per impostare il numero di riga dinamicamente.

Grazie in anticipo.

Answer 1

Vorrei creare un osservabile calcolato dove faccio il filtraggio. Poi il $index() fornirà le rownumbers corrette:

in modo da aggiungere una nuova proprietà selectedUsers al myViewModel:

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

quindi associare ad esso nella tabella:

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