왜 내 데이터 바인딩이 작동하지 않습니까?

Question

저는 SharePoint 2010 웹 파트를 개발 중입니다. 나는 데이터 바인딩을위한 녹아웃 프레임 워크를 사용할 것이다.

var ShopViewModel = { 
lastMaintenanceDate : ko.observable(), 
maintenanceDescription : ko.observable(), 
concept : ko.observable(), 

GetShopDetail : function (val1) { 

$.ajax({ 
     type: "GET", 
     url: "../_layouts/MyProject/MasterPage.aspx/GetDetails?par1=" + val1, 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     data: "{}", 
     cache: false, 
     async: false, 
     success: function (result) { 
      var oJson = eval("(" + result['d'] + ")"); 
      if (oJson.Success) { 
       var result = oJson.Data; 
       if (result) { 
        this.lastMaintenanceDate = String(result.LastMaintenanceDate); 
        this.maintenanceDescription = String(result.MaintenanceDescription); 
        this.concept = String(result.SyConceptId); 
       } 
      } 
      else { 
       WriteToConsole(oJson.Error); 
       customAlert(oJson.Error, "Error"); 
      } 
     } 
    }) 
} 

} : 이것은 내 뷰 모델이

$(document).ready(function() { 
    ko.applyBindings(ShopViewModel); 
}); 

입니다 :이 코드를 작성 document.ready 내부

<table> 
     <tr> 
      <td> 
       <label id="lblLastMaintenanceDate">Data ultima manuntenzione:</label> 
      </td> 
      <td> 
       <span id="lastMaintenanceDate" data-bind="text: lastMaintenanceDate"></span> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <label id="lblMaintenanceDescription">Descrizione manuntenzione:</label> 
      </td> 
      <td> 
       <span id="MaintenanceDescription" data-bind="text: maintenanceDescription"></span> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <label id="lblConcept">Concept:</label> 
      </td> 
      <td> 
       <span id="Concept" data-bind="text: concept"></span> 
      </td> 
     </tr> 
    </table> 

() :

는이 코드 하나 ASCX이

그리고 I c 모든 GetShopDetail 함수는 다음 코드를 사용합니다.

ShopViewModel.GetShopDetail(val1); 

내 문제는 데이터 바인딩이 작동하지 않는다는 것입니다.

도와 주시겠습니까?

감사

Answer 1

두 가지 이유 :

1. 이 아약스 콜백 내에서 this 때문에 당신의 ViewModel 없습니다. 원한다면 bind

2. 을 사용하십시오. 관측 대상을 원시 속성으로 바꾸므로 사용하십시오. 이 KO의 가장 기본적인 측면 중 하나이기 때문에 내가의 Knockout tutorials을 통해 작업을 제안,

   success: function (result) { 
        var oJson = eval("(" + result['d'] + ")"); 
        if (oJson.Success) { 
         var result = oJson.Data; 
         if (result) { 
          // ************** Change on next three lines 
          this.lastMaintenanceDate(String(result.LastMaintenanceDate)); 
          this.maintenanceDescription(String(result.MaintenanceDescription)); 
          this.concept(String(result.SyConceptId)); 
         } 
        } 
        else { 
         WriteToConsole(oJson.Error); 
         customAlert(oJson.Error, "Error"); 
        } 
       }.bind(this)  // <===== Change here 
   

   다시 # 2 : 대신에, 그래서

관찰

의 값을 설정합니다.

---

사이드 노트 : eval을 사용하여 JSON을 구문 분석하지 마십시오. JSON.parse을 사용하여 JSON을 구문 분석하십시오. 또는 $.parseJSON.