10

ヘッダー (#、ユーザー名、ユーザーの姓) を持つテーブルがあり、ノックアウト foreach ループを実行して、ユーザーがチェックボックス リストからユーザー名を選択したときに行を追加しています。これが私のフィドルです。

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

ユーザーがユーザー1と3を選択すると、 $index() + 1 が行番号に対して機能しないという問題が発生します。

行番号を動的に設定する方法が必要です。

前もって感謝します。

4

1 に答える 1

16

フィルタリングを行う場所で、計算されたオブザーバブルを作成します。次に、$index()は正しい行番号を提供します。

だからあなたのに新しいプロパティを追加selectedUsersしますmyViewModel：

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。

于 2013-03-07T10:55:41.420 に答える