2012-07-27 5 views
2

나는 내 머리카락을 꺼내! 나는 모든 예제, 튜토리얼 등을 읽었으며, 다른 것들은 매우 단순하게 보이도록 만들었지 만 Knockout을 처음 접했고 작동시키지 못했습니다.녹아웃 게시 JSON 양식 데이터 게시물 null

jquery ajax 요청에서 값을 바인딩하려는 사용자 프로필 양식이 있습니다. 기본적으로 서버에서 프로파일을 가져 와서 이전에 저장 한 데이터를 양식 값으로로드 할 수 있기를 원합니다. API에서 JSON을 요청하고 매핑 플러그인을 사용하여 값을 양식에로드 할 수 있습니다 (데이터베이스에 프로필을 미리 채 웠습니다).

$.getJSON("api/profile/" + "<?php echo $_SESSION['id']; ?>",function(json){ 

    var viewModel = ko.mapping.fromJS(json);  
    ko.applyBindings(viewModel); 

}); 

잘 작동합니다. 내가 겪고있는 문제는 게시 측에 있습니다. 사용자가 처음 양식을 채우고 저장 버튼을 클릭하면 모든 값이 JSON에서 서버에 다시 게시됩니다.하지만 한 필드 만 변경 한 다음 다시 저장하면 변경된 값만 게시되고 다른 모든 값은 (나는 이것을 시도, ko.observalbe() 값을 ""로 등!) 널 내가 사용하고 뷰 모델은

으로 게시

viewModel ={} 

여기에있다 저축 전화 :

viewModel.save = function(){ 

       $.ajax({ 
        url:"api/profile/" + "<?php echo $_SESSION['id']; ?>", 
        contentType: 'application/json', 
        data: ko.mapping.toJSON(viewModel), 
        type: "POST", 
        dataType: 'json', 
        success: function(data) { 

         alert("What's UP!"); 

         alert(data) 

        }, 
        error: function (data) { alert("error" + data); } 
        }); 
     } 

나는 알고있다. h 저장의 "데이터"라인과 관련이 있으며 Knockout이 값에 바인딩하는 방법을 설명했지만 나에게있어서 그 사실을 알 수는 없습니다. 어떤 도움이라도 대단히 감사 할 것입니다!

이 마침내 그 검색을 위해 작동하는 최종 코드입니다 (또는 응용 프로그램 네임 스페이스의 글로벌 될 수있다) 나는 녹아웃 매핑 플러그인을 사용하면

<script type="text/javascript"> 

     var viewModel; 

     function callback(data) { 
      if (viewModel) { 
       // model was initialized, update it 
       ko.mapping.fromJS(data, viewModel); 
      } else { 
       // or initialize and bind 
       viewModel = ko.mapping.fromJS(data); 
       ko.applyBindings(viewModel); 
      } 
     } 

    save = function() { 

      $.ajax({ 
        url:"api/profile/" + "<?php echo $_SESSION['id']; ?>", 
        contentType: 'application/json', 
        data: ko.mapping.toJSON(viewModel), 
        type: "POST", 
        dataType: 'json', 
        success: function(data) { 

        alert(ko.mapping.toJSON(viewModel));  
        }, 
        error: function (data) { alert("error" + data); } 
        }); 
     }   


    $.ajax({ 
       url: "api/profile/" + "<?php echo $_SESSION['id']; ?>", 
       contentType: 'application/json', 
       type: "GET", 
       dataType: 'json', 
       success: function(data) { 
       callback(data);   


       }  
     }); 


    </script> 
+0

Chrome 개발자 도구 또는 Fiddler를 통해 해당 필드가 실제로 전송되지 않도록 확인할 수 있습니까? 요청 시체를 거기에 추가 할 수 있습니까? – Arbiter

+0

jQuery도 사용하고 있으므로'.serialize()'를 사용하여 모든 폼 값을 가져 오는 것이 좋습니다. knockout.js에 대해 모르겠 음 .serialize API는 서버 측 코드의 일부를 업데이트해야 할 수도 있습니다. – AdityaParab

+0

firebug repsonse로 업데이트했습니다. – user1557966

답변

3

, 나는 항상 변수 생성 한 번만 모델을 초기화 , 나머지 모든 Ajax 요청은 모델을 업데이트하기 만하면 업데이트 단계가 누락되었을 수 있습니다. 여기

입니다 아래의 코드 (자바 스크립트 코드는 물론, 단순화) :

var model; // it is undefined, I just need to have the way to find whether the model was initialized or not 
function callback(data) { 
    if (model) { 
     // model was initialized, update it 
     ko.mapping.fromJS(data, model); 
    } else { 
     // or initialize and bind 
     model = ko.mapping.fromJS(data); 
     ko.applyBindings(model); 
    } 
} 

// do ajax request and call callback(data) on success callback 

그것은 당신이 당신의 문제를 해결하는 데 도움이 되었습니까?

+0

그런 다음 서버에 다시 게시하려면 어떤 모양입니까? 데이터 : ko.mapping.toJSON (모델)? – user1557966

+0

모델을 제대로 초기화하고 콜백으로 모델을 업데이트하면 yes로 가정합니다 (JSON 자체를 되돌려 보내지 않습니다). 그러면 ko.mapping.toJSON (model)을 사용하여 모델에서 적절한 JSON을 얻어야합니다. 더 많은 조사를 할 수 있지만 나중에는 더 많은 자유 시간이 있습니다. – akazlou