바인딩 녹아웃 foreach 때 테이블 행 번호

Question

나는 헤더 (#, 사용자 이름, 사용자 성)와 테이블을 가지고 있으며 사용자가 체크 박스 목록에서 사용자 이름을 선택하면 행을 추가 foreach 루프를 녹이고있다. 여기 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); 
}); 

문제는 사용자가 사용자 1과 3 $ 인덱스를 (선택하는 경우에 온다) + 1은하지 않습니다 내 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> 

입니다 행 번호에 대한 작업.

동적으로 행 번호를 설정하는 방법이 필요합니다. 사전에

감사합니다.

Answer 1

필자는 필터링을 수행하는 계산 된 관찰 가능 객체를 만들 것입니다. 그런 다음 $index() 올바른 rownumbers을 제공합니다 :

그래서 당신 myViewModel에 새 속성 selectedUsers을 추가

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

그런 다음 테이블에 바인딩 :

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

데모 JSFiddle합니다.