녹아웃을 사용하여 생성 된 버튼 클릭으로 데이터 테이블을 표시하고 있습니다. 팝업 창을 열었을 때 열리고 데이터 테이블이 정상적으로 작동합니다. 이 팝업을 닫은 후 다시 열면됩니다. 그것은 ko.cleannode를 사용하여 시도한 메신저 데이터를 보여 주며 다시 바인딩을 적용하지만 결과는 없습니다. 여기 내 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.')입니다 (함수() { GetRecordsForDataTable (columnslist, VM)을 클릭합니다,.. $ ('#의 res_edit') 쇼();
당신의.done
기능에
});
$('#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. ");
});
}
를,이 라인'ko.mapping.fromJS (응답, 뷰 모델)을 변경 시도 -
#res_edit
하지만 ...'cleanNode' #modal_Container
하려고하면 }, viewModel);''.done' 함수에서 가지고있는 다른 라인들을 제거합니다. 뷰 모델 (서버의 데이터로 뷰 모델 데이터 새로 고침)을 업데이트하는 경우 바인딩이 이미 적용되어 있으며 데이터를 업데이트하기 위해'ko.mapping'을 사용해야합니다. – rwisch45자발적인 조언 click/show/hide 이벤트를 처리하는 jQuery는 녹아웃 바인딩을 사용합니다. 나는 그것이이 특별한 문제와 관련이 있는지 의심 스럽지만, 장기적으로 두통을 덜 일으킬 것이라고 나는 생각한다. 예제에서 모든 클릭 이벤트 및 표시/숨기기 이벤트는 '클릭'및 '표시'바인딩으로 처리 할 수 있습니다. –
처음에는 #res_edit에 바인딩하지만 '정리 노드'로 시도합니다. #modal_Container ... – beauXjames