Knockout.js로 UI 컨트롤 업데이트

Question

knockout.js에서 작업 중이며 완전히 새로 워졌습니다. 동적으로 웹 API에서 데이터를 가져 와서 테이블에 바인딩하고 있습니다. 다음과 같이 그에 대한 코드는 다음과 같습니다

이전 다음 다음의

온 클릭이 데이터베이스에서 레코드를 가져올 테이블에 표시되어야합니다 :

var RowNumber; 
var viewModel = {}; 
var url_paging = "http://192.192.192.192/api/OLMS/GetOlDetailsByRowNumber?token=" + tokenval + "&rowNumber=1"; 
$(document).on("pageinit", "#grid_page", function() { 
     $.getJSON(url_paging, function (data) { 
       var newLeads = ko.mapping.fromJS(data); 
       viewModel.model = newLeads; 
       RowNumber = data.SequenceNo; 
       ko.applyBindings(viewModel, document.getElementById("oltable"));      
      }); 
}); 

and HTML : 

<table data-bind="attr: { 'id': OLId }" class="zebra-striped" style="margin: 0 auto;"> 
           <tbody> 
            <tr> 
             <td colspan="4" style="height: 30px; font-size: 16px; vertical-align: middle; text-align: center; font-weight: bold;"> 
              OPINION LEADER DETAILS FOR <span data-bind="text: OLFirstName"></span><span data-bind="text: OLMiddleName"></span><span data-bind="text: OLLastName"></span>, <span data-bind="text: Degrees"></span>. 
             </td> 
            </tr> 
            <tr> 
             <td style="width: 10%;"> 
              <img data-bind="attr: {src: 'https://olms.kolonlinemnk.com/Uploads/Mallinckrodt/Photo/1214/' + Photo()}" 
               alt="" style="border: 1px solid #DDD; width: 100px; height: 125px;"> 
             </td> 
             <td style="width: 30%;"> 
              <span data-bind="text: Title"></span> 
              <br /> 
              <span data-bind="text: Department"></span> 
              <br /> 
              <span data-bind="text: Address1"></span> 
              <br /> 
              <span data-bind="text: Address2"></span> 
              <br /> 
              <a class="nounderline" data-bind="attr: {href: 'tel:' + Phone()}"> 
               <span data-bind="text: Phone"></span> 
              </a> 
             </td> 
             <td style="width: 30%;"> 
              Influence: <br /> 
              Category: <br /> 
              Tier: <span data-bind="text: Tier"></span> 
              <br /> 
              Top 25<br /> 
              Type: <br /> 
              Interests: 
             </td> 
             <td style="width: 30%;"> 
              Distance: <br /> 
              Last Interaction:<span style="color: red;"></span><br /> 
              <br /> 
              <a href="mailto:steve.abram@mcwpain.org"> 
               <img class="imagepadding" alt="" src="images/icon-email.png"> 
              </a> 
              <a target="_parent" 
               href="interactionview.html"> 
               <img class="imagepadding" alt="" src="images/icon-addcomment.png"> 
              </a> 
              <a target="_parent" 
               href="pov.html"> 
               <img class="imagepadding" alt="" src="images/icon-statistics.png"> 
              </a> 
              <a target="_parent" href="profile.html"> 
               <img class="imagepadding" alt="" src="images/icon-insertpictureleft.png"> 
              </a> 
              <a target="_parent" href="map_directions.html"> 
               <img class="imagepadding" alt="" src="images/icon-automobile-car.png"> 
              </a> 
             </td> 
            </tr> 
           </tbody> 
          </table> 

지금은 이전 및 다음 버튼이 있습니다

function GetNextOL() { 
       var url_NextOL = "http://192.192.192.192:8080/api/OLMS/GetOlDetailsByRowNumber?token=" + tokenval + "&rowNumber=1" + (RowNumber + 1) ; 
       alert("before"); 
       $.getJSON(url_NextOL, function (data) { 
        var nextOL = ko.mapping.fromJS(data); 
        alert(nextOL); 
        //viewModel.model = nextOL; 
        // var _data = $("oltable"); 
        //ko.cleanNode(_data); 
        //ko.applyBindings(viewModel, document.getElementById("oltable")); 
        ko.mapping.fromJS(nextOL, viewModel); 
       }); 
       alert("after"); 
     }   

나는 점점 오전 다음과 같은 오류 :

knockoutjs can not apply bindings multiple times to the same element.

동일한 UI를 다른 데이터로 어떻게 업데이트합니까? 당신은 조금 잘못된 플러그인 매핑을 사용하는

Answer 1

, 그것은 3 PARAMS

ko.mapping.fromJS(data, options, objectToUpdate); 

예를 참조한다

http://jsfiddle.net/jk5NF/

당신은 아닌 이벤트 핸들러에서 한 번만 ko.applyBindings를 호출해야

Answer 2

그 여러 번 호출 될 수 있습니다.