在popup中编辑数据时，knockoutjs中的所有行只显示第一行的数据

Question

我正在使用 knockoutjs 使用 foreach 循环在表中显示多条记录，在我们软件的先前版本中，当用户单击行编辑时，它会显示 tr 中的输入字段，以便用户可以编辑。现在我的任务是当用户单击该特定 tr 的用户名时，在引导弹出窗口中显示输入字段。 问题是当我单击任何行时，它仅在模式弹出窗口中显示第一行的数据。 以下是我的整页代码

<div class="hidden cstm-right-sc" data-bind="css: { hidden: false }" id="AdminPanel">
<div id="CriteriaPanel" class="criteria">
    <div class="criteria_filter">
        <h3>Filter Criteria</h3>
        <div class="filter-criteria_innr">
            <label for="Company">Company</label>
            <select autofocus="autofocus" data-bind="options: Companies, optionsCaption: '(Select)', optionsText: 'Name', optionsValue: 'Id', value: CompanyId, visible: !Busy()" id="Company"></select>
            <span data-bind="visible: Busy"><i class="fa fa-spinner fa-spin"></i> loading...</span>
        </div>
    </div>
</div>
<div id="CriteriaSummaryPanel" class="criteria cstm_sctn">
    <div class="criteria_innr">
        <h3>Community Resident Portal - Client Administrators</h3>

        <div class="criteria_contnt">
            <div data-bind="if: CompanyId()">
                <div data-bind="text: 'Company: ' + CompanyName()"></div>
            </div>
        </div>
    </div>
</div>
<table class="report-table" data-bind="if: CompanyId()">
    <thead>
        <tr>
            <th>
                Login
            </th>
            <th>
                Email
            </th>
            <!-- ko if: $root.EditId() !== null -->
            <!--<th>
                New Password
            </th>
            <th>
                Active
            </th>
            <th>
            </th>-->
            <!-- /ko -->
        </tr>
    </thead>
    <tbody data-bind="foreach: Users">
        <tr>
            <!-- ko if: $root.EditId() === Id() -->
            <td><span data-bind="click: $root.Edit, text: LoginName, css: { clickable: $root.EditId() === null }" data-toggle="modal" data-target="#myModal"></span></td>
            <td>
                <span data-bind="text: EditEmail" />
            </td>

            <!--<td>
                <input data-bind="value: Password, valueUpdate: 'keyup'" type="text" />
            </td>
            <td>
                <input data-bind="checked: IsApproved, visible: $root.EditId() !== 0" type="checkbox" />
                <span data-bind="visible: $root.EditId() === 0">N/A</span>
            </td>
            <td>
                <div id="InlineEditActionPanel">
                    <span data-bind="click: $root.Save, css: { clickable: $root.IsValid }">Save</span>
                    <span class="clickable" data-bind="click: $root.CancelEdit">Cancel</span>
                </div>
            </td>-->
            <!-- /ko -->
            <!-- ko ifnot: $root.EditId() === Id() -->
            <td><span data-bind="click: $root.Edit, text: LoginName, css: { clickable: $root.EditId() === null }" data-toggle="modal" data-target="#myModal"></span></td>
            <td data-bind="text: Email"></td>
            <!-- ko if: $root.EditId() === 0 -->
            <!--<td></td>
            <td></td>
            <td></td>-->
            <!-- /ko -->
            <!-- /ko -->
        </tr>
        <tr class="modal fade" id="myModal" role="dialog" tabindex="-1">
            <td colspan="3" class="modal-dialog" role="document">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Client Admins</h4>
                </div>
                <div class="modal-content">
                    <div>
                        <input data-bind="visible: Id() === 0, value: LoginName, valueUpdate: 'keyup'" type="text">
                        <span data-bind="visible: Id() !== 0, text: LoginName" style="display: none;"></span>

                    </div>
                    <div>
                        <input data-bind="value: EditEmail, valueUpdate: 'keyup'" type="text">
                    </div>

                    <div>
                        <input data-bind="value: Password, valueUpdate: 'keyup'" type="text">
                    </div>
                    <div>
                        <input data-bind="checked: IsApproved, visible: $root.EditId() !== 0" style="display: none;" type="checkbox">
                        <span data-bind="visible: $root.EditId() === 0">N/A</span>

                    </div>
                    <div>
                        <div id="InlineEditActionPanel">
                            <span data-bind="click: $root.Save, css: { clickable: $root.IsValid }">Save</span>
                            <span class="clickable" data-bind="click: $root.CancelEdit" data-dismiss="modal">Cancel</span>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td data-bind="attr: { colspan: $root.EditId() === null ? 4 : 5 }">
                <span data-bind="click: $root.Add, css: { clickable: $root.EditId() === null }" data-toggle="modal" data-target="#myModal2">Add new user</span>
            </td>
        </tr>
        <tr class="modal fade" id="myModal2" role="dialog" tabindex="-1">
            <td colspan="3" class="modal-dialog" role="document">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Client Admins</h4>
                </div>
                <div class="modal-content">
                    <div>
                        <input data-bind="visible: Id() === 0, value: LoginName, valueUpdate: 'keyup'" type="text">
                        <span data-bind="visible: Id() !== 0, text: LoginName" style="display: none;"></span>

                    </div>
                    <div>
                        <input data-bind="value: EditEmail, valueUpdate: 'keyup'" type="text">
                    </div>

                    <div>
                        <input data-bind="value: Password, valueUpdate: 'keyup'" type="text">
                    </div>
                    <div>
                        <input data-bind="checked: IsApproved, visible: $root.EditId() !== 0" style="display: none;" type="checkbox">
                        <span data-bind="visible: $root.EditId() === 0">N/A</span>

                    </div>
                    <div>
                        <div id="InlineEditActionPanel">
                            <span data-bind="click: $root.Save, css: { clickable: $root.IsValid }">Save</span>
                            <span class="clickable" data-bind="click: $root.CancelEdit">Cancel</span>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    </tfoot>
</table>

请帮助我，我是淘汰 js 的新手。 这很重要。

Answer 1

您在foreach: Users 内多次创建ID 为myModal 的模态框，因此您有多个具有相同ID 的模态框。它打开它找到的第一个具有该 ID 的模式，这是第一条记录。您需要唯一地命名模态，例如

<td>
    <span data-bind="click: $root.Edit, text: LoginName,
          css: { clickable: $root.EditId() === null },
          attr: {'data-target', '#myModal' + Id()}"
          data-toggle="modal"></span>
</td>

和

<tr class="modal fade" data-bind="attr: { id: 'myModal' + Id()}"
    role="dialog" tabindex="-1">