녹아웃 : 데이터가 JSP에 표시되지 않습니다.

Question

부트 스트랩 모달 내 사용자 데이터 세부 정보를 표시하고 싶습니다. AJAX를 사용하여 데이터를로드하고 녹아웃 매핑 플러그인을 사용하여 녹아웃 ViewModel에 바인딩합니다.

데이터가 올바르게로드되고 녹아웃 모델에 바인딩되지만 UI에서 데이터가 표시되지 않습니다. 문제가 어디에 있는지 누가 알 수 있습니까?

의 user.js

var model = new UserViewModel(); 

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

userViewModel.js

function UserViewModel() { 
    var self = this; 
    self.userHelper = ko.observable(); 
    self.userHelper.user = ko.observable(); 

    self.loadUserData = function(userId) { 
     $.ajax({ 
      type : "POST", 
      url : "/user/loadUserDetail.htm", 
      data: {"userId": userId}, 
      success : function(response) { 
       var parsedJSON = $.parseJSON(response); 
       var userHelper = new UserHelper(parsedJSON); 
       self.userHelper = userHelper; 

       // correct first name is printed 
       console.log(userHelper.user.firstName()); 
       $("#user-dialog").modal('show'); 
      }, 
      error : function(e) { 
       showErrorBox('Error: ' + e.status); 
      } 
     }); 
    } 
} 

function UserHelper(data) { 
    this.user = ko.mapping.fromJS(data.user); 
    this.availableGroups = ko.mapping.fromJS(data.availableGroups); 
    this.errors = ko.observableArray(mapDictionaryToArray(data.errors)); 
} 

user.jsp

<input type="text" class="form-control input-sm" data-bind='attr:{value: userHelper.user.firstName}' name="user.firstName" /> 

---

,174,

업데이트 :

내 코드를 업데이트하지만 데이터는 여전히 UI에 미리 보여줍니다되지 않습니다. 여기에 오류가 있습니까?

userViewModel.js

var userHelper = { 
    user: ko.observable(), 
    availableGroups: ko.observableArray([]), 
    errors: ko.observableArray([]) 
}; 

function mapData(data) { 
    userHelper.user = ko.mapping.fromJS(data.user); 
    userHelper.availableGroups = ko.mapping.fromJS(data.availableGroups); 
    userHelper.errors = ko.observableArray(mapDictionaryToArray(data.errors)); 
} 

function UserViewModel() { 
    var self = this; 

    self.loadUserData = function(userId) { 
     $.ajax({ 
      type : "POST", 
      url : "/user/loadUserDetail.htm", 
      data: {"userId": userId}, 
      success : function(response) { 
       var parsedJSON = $.parseJSON(response); 
       mapData(parsedJSON); 
       console.log(userHelper.user.firstName()); 
       registerClickListener(); 
       $("#user-dialog").modal('show'); 
      }, 
      error : function(e) { 
       showErrorBox('Error: ' + e.status); 
      } 
     }); 
    } 
} 

JSP :

self.userHelper = ko.observable(); 
//... 
self.userHelper = userHelper; // This is wrong 
//... 
self.userHelper(userHelper); //This is correct 

또한 사용을 변경해야합니다 :

<input type="text" class="form-control input-sm" data-bind='attr:{value: userHelper.user.familyName}' name="user.familyName" /> 

Answer 1

당신은 코의이 관찰 오용

초기 userHelper 값이 정의되지 않은 때문에 6,

.. data-bind='attr:{value: userHelper().user.firstName}'... 

또한, 녹아웃은 그것을 처음으로 바인딩 문제가있는 것입니다, 당신은 userHelper()가 정의하는 경우 HTML로 검사를 추가해야합니다.

또 다른 방법은 처음 UserHelper의 빈 모델을 정의하고 단지 완료되면 아약스