绑定敲除foreach时的表格行号答案

【问题标题】：Table row number when binding knockout foreach绑定敲除foreach时的表格行号
【发布时间】：2013-12-24 00:25:13
【问题描述】：

我有一个带有标题（#，用户名，用户姓氏）的表，并且正在执行淘汰赛 foreach 循环以在用户从复选框列表中选择用户名时添加行。这是我的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>

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 对行号不起作用。

我需要一种动态设置行号的方法。

提前致谢。

【问题讨论】：

究竟是什么不起作用？对我来说似乎很好。
我想要行号而不是数组的索引
当然，但是如果我选择第 1 行和第 3 行，我会在表中看到第 1 行和第 3 行，并且 # 列中有正确的索引。究竟出了什么问题？
如果我选择 1 和 3，我希望它显示 1 和 2，我想用给出表中行号的东西替换 $index
$parent.users.indexOf($data) 作为 click 函数中的参数。这将动态返回您的索引。

标签： knockout.js

【解决方案1】：

我会在我进行过滤的地方创建一个计算的 observable。然后$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.

【讨论】：

谢谢。这就是我想要的
不错的解决方案。每当我发现自己在 HTML 绑定中进行排序/过滤逻辑时，我都会使用这种方法。