0

複数のユーザーを返すテーブルの周りに Knockout js foreach ループがあり、返された各ユーザーがそのレコードを検索するための検索ボタンがあります。ボタンとデータは正常に描画されますが、検索ボタンをクリックすると最初のユーザーしか返されません。これは、検索ボタンの id が常に同じであり、DOM と対話して each 関数を追加する必要があるためだと思いますか? これは正しいでしょうか?もしそうなら、これはどのように行われますか?

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

JS

$('#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();

        }
4

1 に答える 1

1

まず、 foreach 内で定数値を id として使用することはできません。これにより、html に同じ id を持つ複数の要素が含まれるようになります (これは許可されていません)。

また、ノックアウトを使用してテンプレートを管理しているため、ノックアウト クリック バインディングを使用してクリック イベントを管理する必要があります。ノックアウトのドキュメントを参照してください http://knockoutjs.com/documentation/click-binding.html

于 2013-02-27T10:43:24.200 に答える