Ajax 호출의 성공 처리기를 통해 observableArray를 업데이트하는 방법은 무엇입니까?

Question

observableArray (jQuery 템플릿을 사용하여 페이지의 정보를 나열하는)를 만들려고했는데 버튼 클릭 (페이지로드가 이상적 임에도 불구하고)에서 Ajax 호출을 실행하고 정렬. 여기

내가 무엇을 가지고 있지만 그것을 작동하지 않는 경우, 에러 제공 :

this.propertyDetails is undefined

HTML :

<button data-bind="click: addProperty">Add property</button> 

JS :

var viewModel = { 
propertyDetails: ko.observableArray([ 
    {name: "1", type: "Unknown"}, 
    {name: "2", type: "Unknown"}, 
    {name: "3", type: "Unknown"}, 
    {name: "4", type: "Unknown"} 
]), 

addProperty: function() { 
    //this.propertyDetails.push({name: "New Thing", type: "Unknown"}); 

    $.ajax({ 
     dataType: 'json', 
     data: 'count=10', 
     url: 'http://feeds.delicious.com/v2/json/tomleadbetter?callback=?', 
     success: function (data) { 
      $.each(data, function(i,item){ 
       console.log(item); 
       this.propertyDetails.push({name: item.d , type: item.u}); 
      }); 
     } 
    }); 
} 
}; 

ko.applyBindings(viewModel); 

그것은 아약스를 실행을 버튼 클릭시 호출하지만 각 항목을 배열로 푸시 할 때 실패합니다.

나를 잘못 이해하지 마라. 내가 완전히 잘못했을 수 있습니다! 그러나이 선은 버튼을 눌러 어레이에 삽입합니다 :

this.propertyDetails.push({name: "New Thing", type: "Unknown"}); 

그래서 어떤 포인터가 좋을 것입니다.

Answer 1

문제점 설명에 대해 작업해야합니다. 실패는 완전히 구체적이지 않습니다. 오류가 발생합니까 아니면 오류없이 실행됩니까?

내 생각에 은 (는) 당신이 생각하는 바가 아니기 때문에 this.propertyDetails이 해결되지 않습니다. console.log(this.propertyDetails)을 시도해보고 무슨 일이 일어나는 지 볼 수 있습니다. 정의되지 않은 경우 this 참조가 문제이므로 .bind(viewModel)을 처리기 함수에 추가하여 문제를 해결할 수 있습니다.

\t \t \t \t \t viewModel.propertyDetails.push :

addProperty: function() { 
    //this.propertyDetails.push({name: "New Thing", type: "Unknown"}); 

    $.ajax({ 
     dataType: 'json', 
     data: 'count=10', 
     url: 'http://feeds.delicious.com/v2/json/tomleadbetter?callback=?', 
     success: function (data) { 
      $.each(data, function(i,item){ 
       console.log(item); 
       this.propertyDetails.push({name: item.d , type: item.u}); 
      }.bind(viewModel); 
     } 
    }); 
}