knockoutjs 있음 "캐치되지 않은 오류 : 바인딩을 구문 분석 할 수 없습니다."오류가 발생하지만 코드가 작동합니다.

Question

녹아웃 js 매핑을 사용하여 작업하는 동안 샘플을 실행하려고하면 콘솔 오류가 발생합니다. 여기

Uncaught Error: Unable to parse bindings. Message: ReferenceError: loadUserData is not defined; Bindings value: click: loadUserData

코드

,

<form action="#" method="post"> 
    <p>First name: <input data-bind='value: firstName' /></p> 
    <p>Last name: <input data-bind='value: lastName' /></p> 
    <div> 
     Your favorite food: 
     <select data-bind='options: activities, value: favoriteHobby'></select> 
    </div> 
    <p><button data-bind='click: loadUserData'>Load data</button></p> 
    <p><button data-bind='click: saveUserData'>Save Data</button></p> 
</form> 
<script> 
    function PersonViewModel() { 
     var self = this; 
     self.firstName = ""; 
     self.lastName = ""; 
     self.activities = []; 
     self.favoriteHobby = ""; 
     self.loadUserData = function() { 
      $.getJSON("/get-user-data.json", function (data) { 
       var viewModel = ko.mapping.fromJS(data); 
       ko.applyBindings(viewModel); 
      }); 
     } 
     self.saveUserData = function() { 
      var data_to_send = { userData: ko.toJSON(self) }; 
      $.post("/save-user-data", data_to_send, function (data) { 
       alert("Your data has been posted to the server!"); 
      }).fail(function() { 
       alert("Ensure the Url before save the data"); 
      }); 
     } 
    } 
    ko.applyBindings(new PersonViewModel()); 
</script> 

GET-사용자 data.json

{ 
    "firstName": "John", 
    "lastName": "Smith", 
    "activities": [ "Golf", "Kayaking", "Web Development" ], 
    "favoriteHobby": "Golf" 
} 

동안 클릭 데이터를로드 버튼 오류 발생하는,하지만 샘플 작품, 어떻게 이 오류를 지우려면

Answer 1

@ user3297291에서 지적했듯이 ko.applyBindings는 두 번 호출 할 수 없습니다. 대신보기 모델의 녹아웃 관찰 항목의 속성을 변경하면 knockout이 UI를 변경하면 자동으로 업데이트됩니다.

function PersonViewModel() { 
    var self = this; 
    self.firstName = ko.observable(); 
    self.lastName = ko.observable(); 
    self.activities = ko.observableArray(); 
    self.favoriteHobby = ko.observable(); 
    self.loadUserData = function() { 
     return $.getJSON("/get-user-data.json", function (result) { 
      self.firstName(result.firstName) 
       .lastName(result.lastName) 
       .favoriteHobby(result.favoriteHobby) 
       .activites(result.activities); 
     }); 
    } 
} 
ko.applyBindings(new PersonViewModel());