每个循环的 JS 淘汰赛生成新的 id答案

【问题标题】：JS knockout for each loop generate new id's每个循环的 JS 淘汰赛生成新的 id
【发布时间】：2013-02-13 03:05:45
【问题描述】：

我有一个 Knockout js foreach 循环围绕一个返回多个用户的表和一个搜索按钮，供每个返回的用户搜索该记录。按钮和数据按应有的方式绘制，但是当我单击任何搜索按钮时，它只返回第一个用户。我相信这是因为搜索按钮的 id 总是相同的，需要与 DOM 交互以添加每个功能？这是正确的吗？如果正确，这是如何做到的？

    <!-- ko foreach: $data -->
    <table class="table table-striped, table-bordered" id="customer-results-policy">
        <thead>
            <tr>
                <th>
                    Title
                </th>
                <th>
                    First Name
                </th>
                <th>
                    Surname
                </th>
                <th>
                    Date of birth
                </th>
                <th>
                    Email
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <span data-bind="text: Customer.Title"></span>
                </td>
                <td>
                    <span data-bind="text: Customer.Forename"></span>
                </td>
                <td>
                    <span data-bind="text: Customer.Surname"></span>
                </td>
                <td>
                    <span data-bind="dateString: Customer.DateOfBirth"></span>
                </td>
                <td>
                    <div><input type="text" id="email-search-box-customer" class="span3 search-query" readonly="readonly" data-bind="value: Customer.Email"  /> <br/>
                    <button type="submit" data-bind="click: $parent." class="btn btn-primary submit-email-search-customer">Search for this customer</button>  </div>

                </td>
            </tr>
        </tbody>
    </table>
    <!-- /ko -->

$('#page-parent').on('click', '.submit-email-search-customer', function () {

        $('.submit-email-search-customer').each(function() {
        });

        var email = $('#email-search-box-customer').val();

        var dataExists;
        {
            dataExists = viewModel.refreshViewByEmail(email);
        }

        if (!dataExists) {
            $('#error-message').html("<strong>The email address wasn't recognised -- please check and try again</strong>");
            $('#error-display').show('slow');
            return false;
        } else {
            $('#search-results-many').hide();
            $('#customer-results-email').show();
            $("#search-results").show('slow');
            $("#modify-button").show('slow');
            $("#customer-modify").show();
            $("#account-results").show();
            $("#address-results").show();

        }

【问题讨论】：

标签： knockout.js foreach

【解决方案1】：

首先，你不能在 foreach 中使用常量值作为 id，因为这会使你的 html 有多个具有相同 id 的元素（这是不允许的）

并且因为您使用敲除来管理您的模板，所以我应该使用敲除点击绑定来管理点击事件。查看淘汰赛的文档 http://knockoutjs.com/documentation/click-binding.html

【讨论】：