2012-05-17 4 views
2

데이터 바인딩을 위해 KnockoutJS를 사용하고 있습니다. 코드에 따라 는 컨트롤러의 액션 메소드JSON 배열을 JavaScript 배열로 변환하는 방법은 무엇입니까?

public JsonResult GetPeople() 
{ 
    var people = new List<Person> 
        { 
         new Person {Name = "aaaa", Address = "aaaaaaaaa"}, 
         new Person {Name = "bbbb", Address = "bbbbbbbbb"}, 
         new Person {Name = "cccc", Address = "ccccccccc"} 
        }; 
    return Json(people, JsonRequestBehavior.AllowGet); 
} 

이며 울부 짖는 소리가 클라이언트 측 코드의 조각입니다

<ul data-bind="foreach: people"> 
    <li>NAME:<span data-bind="text: Name"></span></li> 
    <li>ADDRESS:<span data-bind="text: Address"></span></li> 
</ul> 

<script> 
    function getPeopleFromServer() { 
     var people= []; 

     $.ajax({ 
      url: "GetPeople", 
      cache: false, 
      type: "GET", 
      success: function (result) { 
       console.log("result= " + result); 
       people = $.parseJSON(result); 
       console.log("people= " + people); 
      } 
     }); 

     return people; 
    } 

    function ViewModel() { 
     var self = this; 

     // data 
     self.people = ko.observableArray(getPeopleFromServer());   
    } 

    ko.applyBindings(new ViewModel()); 
</script> 

문제는 결과가에서 적절한 값을 가지고있는 동안 getPeopleFromServer 방법에 변수 사람들은 항상 null이라는 것이다 섬기는 사람. 내가 빠진 것이 있습니까?

+0

console.log ("result ="+ result); –

+0

jQuery가 결과를 JSON으로 구문 분석하는지 확인 했습니까? '$ .parseJSON'을 삭제하고 일이 시작되는지 확인할 수 있습니다 ... – rjz

+1

'success'는 인라인 비동기 함수입니다. 기본적으로 'return people'은 'success'함수가 호출되기 전에 발생합니다. 왜냐하면 ajax 호출이 비 차단이기 때문입니다. 비동기 적으로 작동하도록 (또는 비동기 해제) ViewModel을 다시 디자인해야합니다. 다른 사람들이 코드 픽스를 사용하여 코드를 수정합니다. – Tom

답변

0

올바른 것입니다.

'성공'은 인라인 비동기 기능입니다. 기본적으로 'return people'은 'success'함수가 호출되기 전에 발생합니다. 왜냐하면 ajax 호출이 비 차단이기 때문입니다. 비동기로 작동하도록 (또는 비동기 해제) ViewModel을 다시 디자인해야합니다. 다른 사람들이 코드 수정을 사용하여 코드를 수정하십시오.

여기에 그가 예언 한 완전히 논평 된 바이올린이 있습니다.

http://jsfiddle.net/bczengel/8Wqum/

1
귀하의 $.ajax 함수가 함수를 포함하는 것, 그래서 포함 된 기능은 결코 실행의 말 people을 popuplates 없습니다보다 완료하는 데 시간이 더 걸리는

한 당신이 할 수있는 일은 다음을 추가하는 것입니다 $.ajax :

$.ajax({ 
    async: false, 
    url: "GetPeople", 
    ..... 
}); 

async: false은 ajax가 완료 될 때까지 '대기'함수를 생성합니다. 사람들 var는 함수 실행이 끝날 때마다 채워 져야합니다. 이것이 빠른 승리이지만, 나는 Tom에 동의합니다. ViewModel이 어떻게 처리되는지 다시 생각해야합니다.

+0

답장을 보내 주신 Martin 씨, "async : false"를 추가했지만 결과는 null이 아니며 사람들은 여전히 ​​null입니다. – Ray

0

사람들은 동일한보기 모델에서 언급해야합니다. 또는 자아로서. 뷰 모델 내부에서 아약스 호출을하면 분명히 알 수 있습니다. 그래서 getPeopleFromServer()는 viewmodel 내에 있어야합니다.

관심이 있으신 분은 timeout : 600000을 추가하여 통화가 시간 초과되지 않도록 할 수 있습니다.

관련 문제