2013-12-12 5 views
0

녹아웃을 사용하여 생성 된 버튼 클릭으로 데이터 테이블을 표시하고 있습니다. 팝업 창을 열었을 때 열리고 데이터 테이블이 정상적으로 작동합니다. 이 팝업을 닫은 후 다시 열면됩니다. 그것은 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. "); 
    }); 
    } 
+0

를,이 라인'ko.mapping.fromJS (응답, 뷰 모델)을 변경 시도 - #res_edit하지만 ... 'cleanNode' #modal_Container하려고하면 }, viewModel);''.done' 함수에서 가지고있는 다른 라인들을 제거합니다. 뷰 모델 (서버의 데이터로 뷰 모델 데이터 새로 고침)을 업데이트하는 경우 바인딩이 이미 적용되어 있으며 데이터를 업데이트하기 위해'ko.mapping'을 사용해야합니다. – rwisch45

+1

자발적인 조언 click/show/hide 이벤트를 처리하는 jQuery는 녹아웃 바인딩을 사용합니다. 나는 그것이이 특별한 문제와 관련이 있는지 의심 스럽지만, 장기적으로 두통을 덜 일으킬 것이라고 나는 생각한다. 예제에서 모든 클릭 이벤트 및 표시/숨기기 이벤트는 '클릭'및 '표시'바인딩으로 처리 할 수 ​​있습니다. –

+0

처음에는 #res_edit에 바인딩하지만 '정리 노드'로 시도합니다. #modal_Container ... – beauXjames

답변

0

ko.mapping.fromJS(response, {}, viewModel);이 줄 ko.mapping.fromJS(response, viewModel);를 변경 시도하고 .done 기능에 당신이 가지고있는 다른 줄을 제거

.3210

당신은 (서버에서 데이터와 뷰 모델 데이터를 새로 고침) 뷰 모델을 업데이트하는 경우는, 다음 바인딩은 이미 적용되고 당신은 단지 데이터를 업데이트 할 ko.mapping를 사용할 필요가 - rwisch45

당신은 처음에 결합하는 것을 이`ko.mapping.fromJS (응답 ', {, 당신의`.done` 기능에 beauXjames

관련 문제