Question

我在使用knockout创建的按钮点击上显示数据表它在第一次单击时工作正常弹出打开并且数据表工作正常当我关闭此弹出窗口并再次打开它。它显示我使用ko.cleannode尝试的messay数据然后再次应用绑定但没有结果。这是我的HTML代码

 <div id="res_edit" class="modal hide" role="dialog" aria-labelledby="myModalLabel"    aria-hidden="true">
            <div class="modal-header">
                <button type="button" class="close" id="res_close" data-dismiss="modal" aria-hidden="true">x</button>
                <h3 id="myModalLabel">Select Company</h3>
            </div>
            <div class="modal-body" id="modal_Container" >
                <table >
                    <tr>
                        <td>
                            <input data-bind="value: nameSearch, valueUpdate: 'afterkeydown'" />
                        </td>
                        <td>
                            <input data-bind="value: lastNameSearch, valueUpdate: 'afterkeydown'" />
                        </td>
                    </tr>
                    <tr style="grid-row-align: start">
                        <td>
                            <button data-bind="click:filter">Search</button>
                        </td>
                    </tr>
                </table>
                <table id="modal_table" class="table table-striped table-bordered table-hover">
                    <thead>
                        <tr>
                            <th  data-bind="click:sortTable" orderProp ="firstName">Company
                                <span>
                <i data-bind="attr: { class: iconType }"></i>
            </span>
                            </th>
                            <th>Name</th>
                            <th>Logo</th>

                        </tr>
                        <tr>
                            <td colspan="1">
                                <button data-bind="click: previousSlot, enable: slot() >0" class="btn"><i class="icon-step-backward"></i></button>
                            </td>
                            <td>
                                <label data-bind="foreach: new Array(pages())">
                                    <a data-bind="text: (parseInt($parent.span()) + $index()+1), id: $index()+1, click: $parent.navigatePage"></a>
                                </label>
                            </td>
                            <td>
                                <button data-bind="click: nextSlot, enable: hasNextRecords()" class="btn"><i class="icon-step-forward"></i></button>
                            </td>
                        </tr>
                    </thead>
                    <tbody data-bind="template:{name:templateToUse, foreach: currentPage } " id="tblMain">
                    </tbody>
                    <tfoot>

                        <tr>
                            <td>
                                <button data-bind="click: previousSlot, enable: slot() >0 " class="btn"><i class="icon-step-backward"></i></button>
                            </td>
                            <td>
                                <label data-bind="foreach: new Array(pages())">
                                    <a data-bind="text: (parseInt($parent.span())+ $index()+1), id: $index()+1, click: $parent.navigatePage"></a>
                                </label>
                            </td>
                            <td>
                                <button data-bind="click: nextSlot,enable: hasNextRecords()" class="btn"><i class="icon-step-forward"></i></button>
                            </td>
                        </tr>
                        <tr>
                            <td>Number of items per page:
            <select id="pageSizeSelector" data-bind="value: pageSize">
                <option value="10">10</option>
                <option value="20">25</option>
                <option value="30">50</option>
                <option value="100">100</option>
            </select>
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </div>
            <div class="modal-footer">
            </div>
        </div>

我的js代码是 $（'。res_edit'）。click（function（）{ GetRecordsForDataTable（columnslist，vm）; $（ '＃res_edit'）显示（）;

  });


  $('#res_close').click(function () {
    $('#res_edit').hide();
  });


   function GetRecordsForDataTable(columnslist, vm) {
     var request = { recordsLength: 100 };
    var element = $("#modal_Container")[0];
   ko.cleanNode(element);
    $.ajax({
    url: "../DashBoard/GetRecords",
    type: "GET",
    data: request
 }).done(function (response) {
    if (vm.currentList().length > 0) {
        vm.currentList([]);
        ko.mapping.fromJS(response, viewModel);
        ko.cleanNode(window.document.getElementById("#res_edit"));
        ko.applyBindings(vm, window.document.getElementById("#res_edit"));
    }
    else {
        ko.applyBindings(vm, window.document.getElementById("#res_edit"));
        vm.currentList(response);
    }

   }).fail(function (de) {
    alert("Sorry. Server unavailable. ");
  });
  }

Answer 1

在.done函数中，尝试将此行ko.mapping.fromJS(response, viewModel);更改为此ko.mapping.fromJS(response, {}, viewModel);并删除.done函数中的其他行。

如果要更新视图模型（使用来自服务器的数据刷新视图模型数据），则已经应用了绑定，您只需使用ko.mapping来更新数据 - rwisch45 < / p>

您最初绑定到#res_edit但尝试'cleanNode' #modal_Container ... - beauXjames

按钮点击重新绑定敲除数据表

1 个答案: