binding이있는 knockout.js

Question

이것은 아마도 기본적인 질문이지만 다음 뷰 모델에서는 ajax 호출에서 self.userData를 채우고 있습니다. 이 정보를 UI에 표시하고 싶습니다. 'with'바인딩을 사용하는 방법을 생각했습니다. 그러나 self.userData는 ajax 함수가 호출 될 때까지 비어 있으므로 바인딩을 사용하여 오류가 발생합니다.

HTML

<div data-bind="with: userData"> 
    <div data-bind="text: userId"></div> 
    ... 
</div> 

모델 빈 관찰과

var viewModel = function() { 
     var self = this; 
     self.userData = {}; 
     self.login = function(data) { 
      var postData = { ..trimmed out.. }; 
      $.ajax({ 
       type: "POST", 
       url: "myService", 
       data: postData 
      }).done(function (data, status) { 
       self.userData = ko.mapping.fromJS(data, userData); 
       console.log(self.userData); 

      }).fail(function (data, status) { 
       alert('Could Not Login'); 
      }); 
     } 

    }; 
    ko.applyBindings(new viewModel()); 

Answer 1

초기화 userData에,는 호출 반환 한 번 매핑 플러그인에 의해 생성 된 객체로 설정합니다. 나는.

self.userDara = ko.observable(); 

와

self.userData = {}; 

변경하고 빈 관찰 (아약스 호출에서 단일 개체)로 userData에를 초기화해야

self.userData = ko.mapping.fromJS(data, userData); 

self.userData(ko.mapping.fromJS(data,userData)); 

Answer 2

로 변경하거나 관찰 가능한 배열 (멀티 첫째 PLE 객체) :

self.userData = ko.observableArray([]); 

또는

self.userData = ko.observable();