knockout.js로 테이블을 바인딩하는 방법

웹 서비스에서 얻은 데이터를 사용하여 knockout.js를 사용하여 다음 테이블을 바인딩하려고합니다. 일반적으로 작동하지만이 3 가지 해결하고 싶습니다 : 나는 AJAX 호출 및 데이터를 만들 때knockout.js로 테이블을 바인딩하는 방법

것은 돌아 오면 나는 ko.applyBindings(msg); 전에 테이블을 취소해야합니다. 바로 지금 addind와 add를 계속 유지합니다.
나는 100 개의 테스트 오브젝트를 가지고 있으며 200/300이 추가 된 후에는 느려지고 느려집니다. 나는 테이블에 300 개의 레코드가있을 것이라고 기대한다. 편집! 실제로 그것은 각 행에 대해 또 다른 100 개의 행을 만드는 것으로 보입니다. 그럼, 먼저 100 행, 두 번째 전화 10000 행을 호출 ..
위해서는 첫 번째 행을 지정했다. 페이지가로드 될 때 표시되며이 행을 제거하려면 어떻게해야합니까?

는 HTML :

는

<table id="mainTable" class="paddedTable"> 
      <thead> 
       <tr> 
        <th style="width: 70px;">Trip No</th> 
        <th style="width: 26px;"><img src="/images/attachment_header.png" alt="Attachments"/></th> 
        <th style="width: 70px;">PO No</th> 
        <th style="width: 70px;">BOL No</th> 
        <th style="width: 70px;">Shipper No</th> 
        <th style="width: 100px;">From</th> 
        <th style="width: 100px;">To</th> 
        <th style="width: 100px;">Scheduled Pickup</th> 
        <th style="width: 100px;">Scheduled Delivery</th> 
        <th style="width: 120px;">Status</th> 
        <th style="width: 40px;">&nbsp;</th> 
       </tr> 
      </thead> 
      <tbody data-bind="foreach: d"> 
       <tr class="dataRow"> 
        <td data-bind="text: TripId"></td> 
        <td><img src="/images/pdf_icon24.png" alt="PDF Document"/></td> 
        <td></td> 
        <td></td> 
        <td></td> 
        <td></td> 
        <td></td> 
        <td></td> 
        <td></td> 
        <td>tracking stuff</td> 
        <td><a href="#" class="infoLink"><strong>Info</strong></a></td> 
       </tr>  
      </tbody>

스크립트 : 넉 아웃을 사용하는 경우

function onRefreshButtonClick() { 
     $.ajax({ 
      type: "POST", 
      url: "/Customer/TrackShipment.aspx/GetShipments", 
      data: "{ dateFrom: '" + $("#FromDateTextBox").val() + "', dateTo: '" + $("#ToDateTextBox").val() + "' }", 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: function (msg) { 
       var a = msg.d; 


       ko.applyBindings(msg); 

       // 
      } 
     }); 
    }

출처

2013-04-13 katit

첫째, 한 번 ko.applyBindings()를 호출하는 것을 목표로한다. 보기 모델을 초기화 한 후에는 조작 모델을 조작하여 Knockout의 양방향 바인딩을 사용하여 UI를 동적으로 변경할 수 있습니다.

다음은 내가하려는 생각을 시뮬레이트하는 샘플 피들입니다. View Model을 초기화하고 처음 100 행을로드하는 AJAX 호출을 작성한 다음 사용자가 새로 고침을 클릭하여 다시로드 할 수있게합니다. 테이블을 삭제

는

http://jsfiddle.net/jearles/aTuMv/
간단
self.data([]);로 귀하의 행 폭발 때문에 ko.applyBindings() 여러 번 호출하는이다.

if

예 : 데이터 요소

이있는 경우에만이 테이블을 렌더링

<table id="mainTable" class="paddedTable" data-bind="if: data().length > 0">

출처

2013-04-13 01:42:23

knockout.js로 테이블을 바인딩하는 방법

답변

관련 문제